Pasti banyak di antara sobat blogger yg merasa bahwa saya memiliki navbar keren (hehehe,, tampil beda) Sebenarnya itu bukanlah navbar tapi hanya~lah mirip, untuk lebih jelasnya coba sobat click img pada pojok kanan Stripe-Ad Mirip Navbar, hhh itu baru navbar namanya sob, gimana, udah jelaskan? zzz(kalau belum silahkan ditanya).
Langka-langkah Memasang Stripe-Ad Mirip Navbar :
- Seperti biasa Masuk ke Dasbor Blogger
- Rancangan
- Edit HTML
- Beri tanda centang pada Expand Template Widget
- Copy dan pastekan kode CSS berikut dan pastekan di atas kode ]]></b:skin>
/*-- (mta bar) --*/6. Masukan kode dibawah ini, dan letakan diatas kode </head>
#mta_bar{background:#444 url('http://i1105.photobucket.com/albums/h356/Ozyw42/topnavbar-c.png')
repeat-x; border-bottom:1px 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:8px; padding-bottom:6px}
* 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:underline}
#mta_bar .right a:hover{font-size:10px; color:#80FF00; text-decoration:none}
#left_bar a{background:url('http://i1105.photobucket.com/albums/h356/Ozyw42/check-c.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:underline; color:#80FF00}
#left_bar2 a{background: url(http://i1105.photobucket.com/albums/h356/Ozyw42/facebook-c.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:underline; color:#80FF00}
#left_bar3 a{backround:transparent) no-repeat; text-decoration:none; color:#FFFFFF; padding-right:23px; padding-left:0; padding-top:0; padding-bottom:0}}
#left_bar3 a:hover{text-decoration:underline; color:#80FF00}
#to_top{background:transparent url(http://i1105.photobucket.com/albums/h356/Ozyw42/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px}
#to_top a{padding:8px}
<script>7. Letakkan kode dibawah ini dibawah kode <body>, Silahkan
<!--http://ozy-web.blogspot.com/-->
document.write(unescape('%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%69%74%65%73%2E%67%6F%6F%67%6C%65%2E%63%6F%6D%2F%73%69%74%65%2F%61%73%72%69%7A%61%6C%6F%66%66%69%63%69%61%6C%77%65%62%2F%6A%61%76%61%73%63%72%69%70%74%2F%53%74%72%69%70%74%2D%61%64%2E%6A%73%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E'));
<!-- visit http://ozy-web.blogspot.com/ -->
</script>
sesuaikan settingan dibawah dengan link dan deskripsi anda
sendiri.
<div id='mta_bar'>8. Save
<div id='left_bar3'>
<span class='center'/></div>
<div id='left_bar2'>
<span class='left'>
<a href='http://www.facebook.com/pages/Ozy-w-Fan-Grup/181669658533897'>OZY-W Fan Grup</a>
</span></div>
<div id='left_bar'>
<span class='center'>
<a href='http://ozyw.just-forum.net/'>Ayo..!! Gabung di Ozy W Forum (Free) - Tempat Berbagi n Belajar</a>
</span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='asrizalwahdanwilsa';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i1105.photobucket.com/albums/h356/Ozyw42/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>
Jangan lupa untuk menyesuaikan kode dengan keperluan sobat.
.:Selamat Mencoba:.
Buat sobat blogger yang suka dengan artikel saya, silahkan anda share/post di mana saja anda suka (Blogger, WordPress, facebook, twitter, dll). Namun, diwajibkan untuk mencantumkan link sumber dari artikel yang sobat blogger share/post (copy/paste). Terima kasih,,,
berkunjung sobat,,nice tips..
BalasHapuskunjung & komentar balik yah sob,,terimakasih sebelumnya...
Cara buat logo facebook seperti itu bagaimana ya ?
BalasHapuswaduh..... si o om lagi" buat pakek kode kyak gt lg..... huft ~x(
BalasHapusthx ilmua
BalasHapusmantap infonya sob,,mau di praktekan tapi nanti sob bukan sekarang,coz skarang sibuk,,hehe,, tapi sekali lagi terima kasih bagi-bagi ilmunya sob..
BalasHapus@ViKrY'X MadZ : wahh, seram :-t . sabar ya
BalasHapus@Anugrah..... Free-York : sama-sama sob, nanti mampir lagi ya
@se-masa :sama-sama lagi sob, senang bisa berbagi
waw mantap dah gannn
BalasHapusmau izin copas java scriptnya link sobat tp di protek
BalasHapuskunjungi balik ya bro
krisna-dokumentasi.blogspot.com
link blog sobat akan saya pasang, pasang balik ya sob...thx b4..
oke sob saya coba deh di blog saya yang satunya nanti malam. kalau sekarang mau melanjutkan perjalanan dulu
BalasHapusterima kasih sudah berbagi
Sama-sama
BalasHapusBlogwalking Balik di blog Gw Donk http://bombcheater.blogspot.com
BalasHapusnice..post gan
BalasHapusCroya-Cyber
Thnx sob, nie q upload jg d blog q...., mampir ya gan..
BalasHapusWahh dicoba nih sobbb..
BalasHapus