Home » , » Membuat Floating Header atau Strip Header di Blog

Membuat Floating Header atau Strip Header di Blog

Redi Apri Handoko | 15.04 | 0 comments
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(http://3.bp.blogspot.com/-zUzpsRKiQTQ/Ti1enQhottI/AAAAAAAAAbs/-eK3oHJytbI/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=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;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 berhasil..!!!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Floating Header atau Strip Header di Blog Di posting oleh Redi A.H pada 22 Agt 2009. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google