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.nuel-brani.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP9yxlKGDn5vnsDbgmjiknkVvDS49Jy2vy994xIfXYQmMle7Rg2OFkbypamkKzOk9a9Khp2M_TR7iCi1M2I5DJTb8dET6S9X_6vvZhbjWeM3Gs_51zdQfMvtzJvkNSeT2noR9m2nX-vPi5/s1600/icon-home.png' title='Home'/></a>
<a href='http://www.nuel-brani.com/'><div class='fb-like' data-font='arial' data-href='http://www.nuel-brani.com/' 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

Ditulis oleh immanuel - 00.43