Cara Membuat Floating Header atau Strip Header di Blog - Pada posting sebelumnya saya telah memberikan trik mengenai cara membuat
strip ad footer atau statis footer. Kali ini kita akan melakukan trik
sedikit berbeda yaitu membuat strip header atau floating header. Strip
header ini akan terlihat seperti navigation bar ala blogger. Apabila
anda mengscroll halaman ke bawah maka strip header tersebut akan ikut ke
bawah. Pada strip header ini anda dapat memasang pesan, iklan dan lain
sebagainya. Tertarik bagaimana cara membuatnya, ikuti triknya dibawah
ini:
1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Lalu kopi dan paste kode berikut sebelum kode ]]></b:skin>
/*-- mta bar (blogtrikdantips.blogspot --*/
#mta_bar{background:#000;
border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%;
overflow:auto; position:fixed; margin-left:0; margin-right:0;
margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0;
padding-top:7px; padding-bottom:4px;z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);}
*
html #mta_bar{position:absolute; /*IE6
hack*/width:expression(document.compatMode=="CSS1Compat"?
document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar
.center{float:left; text-align:center; font-family:Verdana,Arial;
font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF;
width:65%}
#mta_bar .left{float:left; text-align:left;
font-family:Verdana,Arial; font-size:13px; font-weight:normal;
font-style:normal; color:#FFFFFF; width:20%}
#mta_bar
.right{font-family:verdana,Arial,Helvetica,sans-serif; float:right;
text-align:center; font-weight:normal; font-size:10px; letter-spacing:0;
width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:none}
#mta_bar .right a:hover{font-size:10px; color:#80ff00; text-decoration:none}
#left_bar
a{background:url('http://1.bp.blogspot.com/-go6gSY549SM/T7r7hZ7fMUI/AAAAAAAADSs/qyppABFiMHI/s400/FaceBook.png')
no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px;
padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:none; color:#80ff00}
#left_bar2 a{background:url('http://1.bp.blogspot.com/-go6gSY549SM/T7r7hZ7fMUI/AAAAAAAADSs/qyppABFiMHI/s400/FaceBook.png') no-repeat 2px; text-decoration:none; color:#FFFFFF; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar2 a:hover{text-decoration:none; color:#80ff00}
#to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1vemOPy-sjUQimYHl1st0CM7SywsPVAdg2JGE5mpBY_dWiTi54Y4OKImD9tF9rnCZmWIkRYJFm6kBOGsj9o83SHdNwwkDZ-npWawfLVUIoLHVkdvezNHAkSPrcYx1_qcFe8eE5omnXo/s1600/delete.png)
no-repeat scroll 0%; position:absolute; /*this replaces float - fixes
thanks to blognya anak bone
ofhttp://iananakbone.blogspot.com*/height:18px; width:19px; margin:0 0 0
900px; /*this was updated*/padding:9px 5px}
#anima_sudut2 a:link {
color:#000000;
}
#anima_sudut2 a:visited {
color: #FFFFFF;
text-decoration:none;
}
#anima_sudut2 a:hover {
color: #000000;
}
#to_top a{padding:8px}
a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:-40px;
left:auto;
right:-2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}
.menu{
border:none;
border:0px;
margin-left:35px;
padding:0px;
font-size:13px;
}
.menu ul{
background:#000000;
height:2px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#000000;
color:#80ff00;
display:block;
font-weight:normal;
line-height:30px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #212121;
color:#80ff00;
text-decoration:none;
}
.menu li ul{
background:#000000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:180px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#212121 center left no-repeat;
border:0px;
color:#80ff00;
text-decoration:none;
}
.menu p{
clear:left;
}
Keterangan:
- Kode warna merah berfungsi untuk membuat warna kelihatan transparant
- warna ungu adalah alamt url gambar
4. Masukan kode dibawah ini diatas kode </head>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/strip_ads_header.js' type='text/javascript'/>
5. Letak kode dibawah ini dibawah kode <body>
<div id='mta_bar'>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/blogtrikdantips' target='_blank'>Login to Facebook</a></span></div>
<div id='left_bar'>
<span class='center'><a href='http://www.facebook.com/blogtrikdantips' target='_blank;'>Ayo Gabung Facebook Kami Sekarang !!!</a></span></div>
<span
class='right' onmouseout='self.status='''
onmouseover='self.status='o-om.com.com';return
true;'> <img align='absmiddle' border='0'
onClick='closeTopAds();return false;'
src='http://1.bp.blogspot.com/-6gSK0-wxx08/T7r6a23RZ1I/AAAAAAAADSg/IwsfjZEo3-4/s400/delete.png'
style='cursor:hand;cursor:pointer;'/></span></div>
6. Hapus kode berwarna merah lalu gantikan dengan url facebook sobat
7. Simpan template sobat
Selamat mencoba...semoga membantu ......
.jpg)
Recent Comments