Jumat, 15 Maret 2013

Cara Membuat Navbar Keren Dengan CSS


Hai sobat blogger ,pada thread kali ini saya akan memberitahukan Cara Membuat Navbar Keren Dengan CSS, Pada penasaran ama navbar dibawah?
Yang kayak gini itu loh:






,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 2pxlime,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 0lime,-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='#' width='20'/>
<a href='http://killingkr4z.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvimAzEuZyyDJyQ9og9cFhsv0_kd6XCO4YVNQQDxB2gh6MAw5Z0x0Cqgm_AaXJHrVA1K1t3hdP9VAVz6Nz1hMH1uDvt-l4HEmGnMb8dZQC_hXEK3WRshVPeoC-ezi2uYmACwJ1ouHSUcu/s1600/icon-home.png' title='Home'/></a>
<a href='http://killingkr4z.blogspot.com/'><div class='fb-like' data-font='arial' data-href='http://killingkr4z.blogspot.com/' data-layout='button_count' data-send='true' data-show-faces='true' data-width='1'/></div></a>
</span></div> 

  • Keterangan : Ganti Pagar 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

Tidak ada komentar:

Posting Komentar