Cara Membuat Navbar Keren Dengan CSS

Sebelum Di Hover

Sesudah Di Hover

Hai sobat blogger ,pada thread kali ini saya akan memberitahukan Cara Membuat Navbar Keren Dengan CSS

,Langkah-langkahnya adalah sebagai berikut:

1.Login Ke Account Blogger Anda

2.Buka Rancangan,Pilih Edit HTML,

3.Cari Kode ]]></b:skin>,lalu letakkan kode di bawah ini diatasnya

#NBTbar{width:330px; height:30px; margin-bottom:-8px; ; font-family:Supermercado One; color:orange; background:rgba(0,0,0,0.5); background:rgba(0,0,0,0.5); background:rgba(0,0,0,0.5); padding:2px; z-index:999; bottom:1px; left:1px; right:1px; position:fixed; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px lime,1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px lime; -webkit-box-shadow:1px 0 0 lime,-1px 0 0 lime,0 1px 0 lime,0 -1px 0 lime,1px 1px 2px #000,1px 0 0 lime,-1px 0 0 red,0 1px 0 red,0 -1px 0 lime,1px 1px 2px #000}
#NBTbar .left{float:left; text-align:center; font-size:13px; font-style:normal; font-weight:bold; color:red; padding:2px 10px}
#NBTbarr .right{float:right; padding:2px 10px; color:red; text-align:center; font-size:0px; font-style:normal; font-family:'Supermercado One',Arial,Verdana; font-weight:bold; background:-moz-linear-gradient(top,red,#000); background:-webkit-gradient(linear,left top,left bottom,from(BLACK),to(#000))}
#NBTbar:hover{width:1000px; height:80px; margin-bottom:-15px; margin-left:12px}

Ganti kode yang berwarna merah dengan kode warna yg kamu inginkan,Siimpan Template
4.Buka Kembali Rancangan dan Pilih Add Gadget,pilih HTML/JAVASCRIPT
5.Pastekan kdoe di bawah ini di add gadget tsb...

<div id='NBTbar' style='position:fixed;'>
<span class='left'><img align='top' alt='?' height='20' onclick='caesarpopdiv(&quot;caesarmpreview&quot;);' src='http://i1115.photobucket.com/albums/k554/nuel02/ICON.png' width='20'/>
<a href='http://www.Heric-ajha.org/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi98WLRuZUSsYStX8wlfu5viDyKpKoWaaNIrvDBzTBZ0QMzCWwBsrzKkU-x1ZQw6taVPZcIAyXN4D4Ql8-dgPF-ytZ7HiuO7CrR6fVV3laMoQL4FA7s4B_aKDfmWwAOko1fs3eKA5pqFJl_/s1600/icon-home.png' title='Home'/></a>
<a href='http://www.Heric-ajha.org/'><div class='fb-like' data-font='arial' data-href='http://www.Heric-ajha.org/' data-layout='button_count' data-send='true' data-show-faces='true' data-width='1'/></div></a>
</span></div> 

• Keterangan : Ganti Kode Yg Berwarna MERAH,dengan URL FAVICON anda,Dan ganti kode yg berwarna biru dengan URL BLOG anda

Selesai,Sekian tutorial dari saya....jangan lupa sering mampira ya.... jangan lupa join, dan komentar...

Sumber : http://cyber-programming.blogspot.com/