Cara Membuat Navbar Melayang Seperti Facebook

Membuat Navbar melayang ala facebook - dapat membuat cantik tampilan blog kita. Selain cantik,yang paling penting adalah apa fungsinya? Melayang maksudnya,meskipun halaman di scrool ke bawah,tapi navbar tersebut masih tetap terlihat. Dan di navbar tersebut bisa di selipkan seperti, Translate, Share, Random post, facebook page dan lainnya. Bila Sobat Semua Menginginkan Tolbar Atau Navbar Tersebut, Sobat Bisa Mengikuti Langkah-Langkah Berikut:
(BLOCK TEXT ALL)

1. Login Ke Akun "Blogger" Sobat
2. Pada "Dasbor" Pilih Rancangan Kemudian Pilih "Edit HTML"
3. Letakan CSS Berikut Tepat Diatas Kode ]]></b:skin>

/*-- CUSTOM NAVIGATION BAR--*/
* html #mta_bar{position:absolute}
#mta_bar{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6-80l7HB1v83leqS9pkd5hry9hyphenhyphenVGkzcLQSnPk32sq-IXDQdV8wy19QA7jdNtOQ4FdtETt3UcwP0qAHCZ1SYs2MO7ZkxNdGVuib4xqKtOZaEwqA4HStb9Vu4KOqxHmv6-0zbD3FJ2Zjz/s200/nav-background-c.png) top left repeat-x; border-bottom:1px solid #333; z-index:100; padding-top:6px; width:100%; top:0; left:0; overflow:auto; height:25px; overflow:hidden}
#mta_bar .bar_logo{background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/SiwZH4BjB-I/AAAAAAAAEX4/qw31k-6bjzo/s400/feed.gif) 7px 2px no-repeat; float:left; padding-left:7px; text-align:left; font-family:Arial; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:200px; padding-left:20px;padding-top:1px}
#mta_bar .bar_logo a{text-decoration:none; color:#fff; padding-left:21px}
#mta_bar .bar_search{float:left; padding:0; margin:0; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:165px}
#mta_bar .bar_search a{text-decoration:none; color:#fff; padding-left:21px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#mta_bar .bar_submit{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; padding:3px 0; width:140px}
#mta_bar .bar_submit a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKN4h8EOUOM2-2Uig7wMX3o8-Kb1rMzUtPbUZVwoMzJdSA3JEeN05xvoOQMJAwBAo8-BQGRYbxc1IUiEknihRHNTc2Wm_sSbJvAlOU5mKfNwyVv6jaju2hyh6DoASJbGU-lxDn6lSMK7w/s400/facebook.png) 0 no-repeat; text-decoration:none; color:#fff; padding-left:21px}
#mta_bar .bar_submit a:hover{text-decoration:underline; color:#fff}

/* SEARCH */
#search{border:1px solid #d1cdcd; height:18px; width:250px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:230px; padding-left:4px; margin:0; background:none}
#topsearch #search{margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:225px}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
/* -- SET SMALL ICON-- */
#main .icon-demo-download {border:none; width:9px; height:9px; padding:0 0px; margin: 3px 0px 0 3px; vertical-align: top;}

#bottom-bottom{-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; letter-spacing:.0001em;font-size: 9pt;color:#ffffff;padding-left:10px;padding-right:10px; padding-top:10px; padding-bottom:10px; margin-bottom:5px; clear:both;
background:#111;
}

4. Kemudian Letakan Script Berikut Tepat Dibawah Kode <body>

<div id='mta_bar' style='position:fixed;'>
<div class='mta_bar bar_logo'>
<a href=' http://fortynyr.blogspot.com/ '>Homel</a>
</div>
<div class='mta_bar bar_search'>
<div id='topsearch'>
<div id='search'>
<form action=' http://fortynyr.blogspot.com/ search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "search..";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' type='text' value='Cari disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnBY3oQw8Gdnxmc0TOHWj5Jc1bGMGKMzA2N0eWZL8z6F73kGeOpShF85Zf5QIVMPnfK2FL2YszjzJz5rNL0aBMN8Vy1ImpUIs8Q6fQ1gxrT6VmTjkUsBuYC6mftGcacGh5GPcu3gi5_US/s1600/search.gif' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>

</form>
</div>
</div>
</div>
<div class='mta_bar bar_share'>
xxxxxxxx
</div>
<div class='mta_bar bar_GoogleAds'>
xxxxxxx
</div>
</div>

5. Ganti URL yang bewarna merah dengan URL sobat
6. Simpan dan selesai deh...

Selamat Mencoba yah...

^_^

Ditulis Oleh : Fortynyr Blog's™ ~ Tutorial Blogger,Tips,Trik Computer,Share dan SEO

Artikel Cara Membuat Navbar Melayang Seperti Facebook Semoga bermanfaat bagi sobat blog. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar dan Jangan lupa follow, Like. | Sertakan Link Sumber Bila Copy Paste