>>DEMO DI SINI<<
Itu tadi demo dari saya,, langsung saja, saya akan memberikan tutorialnya.
Membuat Halaman Pembuka atau Intro BLOG
#Masuk ke Editan HTML
#Masuk ke Template >> Edit HTML >> lanjutkan
#Centang Expand Template widget
#Cari kode ]]></b:skin> gunakan Ctrl + f untuk memudahkan pencarian.
#Tempatkan kode dibawah ini diatasnya.
#intro{
background:#CAD8C9 url(http://2.bp.blogspot.com/-jILG8O5rDto/UHOJutNC2EI/AAAAAAAAHzA/O22ps9A_aHM/s1600/rd-gradien.jpg) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}
Membuat Halaman Pembuka atau Intro Blog.
#Cari kode </head> dan letakkan kode dibawah ini diatasnya.
<script type='text/javascript'>Membuat Halaman Pembuka atau Intro Blog.
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* dipost oleh http://blogsilinder.blogspot.com
**************************************************/
var persistclose=1
var startX = 0
var startY = 0
var verticalpos="fromtop"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}return returnvalue;}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("intro").style.visibility="hidden";}
function staticbar(){
barheight=document.getElementById("intro").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY; }
return el; }
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y == (pY + startY - ftlObj.y)/0;}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y == (pY - startY - ftlObj.y)/0;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10); }
ftlObj = ml("intro");
stayTopLeft();}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>
#cari kode <body> dan paste kode dibawah ini dibawahnya.
<div id='intro'><div class='welcome'>Selamat Datang</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://seobl0g.files.wordpress.com/2012/08/arif-aminudin.jpg' title='lanjut membaca'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>LAAANNJJUUUTTT</a></div>
</div>
Membuet Halam Pembuka atau Intro Blog.
#Terakhir adalah simpan template.
#Ganti kode berwarna merah dengan kreasi temen" sendiri,,
Semoga artikel Membuat Halaman Pembuka atau Intro Blog ini Bermanfaat.
Key :
Membuat Halaman Pembuka Blog, Membuat Halaman Intro Blog, Membuat halam pembuka, membuat halaman intro, membuat pembuka blog, cara membuat halaman pembuka blog.
0 komentar:
Posting Komentar
Tinggalkan Jejak dengan berkomentar.
berkomentarlah dengan bijak.