Cara buat navbar Facebook ala Yori Blog

Setelah coba - coba untuk membuat Navbar ini dan akhirnya berhasil, Yori Blog mencoba share hasil kerja dari Yori Blog, sobat blogger Yori Blog bisa lihat screen shot dibawah ini :

 Dan berikut navbar dari facebook

Bagaimana ? tidak mirip bukan ? maklum newbie baru belajar. Jika pengen nyoba silahkan ikutin langkah langkah dibwah ini :

1. Buka blog sobat Blogger di www.blogger.com
2. Klik Rancangan ==> Edit Laman ==> Add Gadget / Tambah Gadget
3. Lalu klik HTML/Javascript
4. Masukkan kode dibawah ini
<style type="text/css"> /* --------------------------- Navigasi Facebook By Yori Blog --------------------------- */ #fb {z-index:999;position:fixed;top:0px;left:0px;margin: 0px;height: 37px;width: 100%;background-color: #3B5998;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #FFFFFF;border-bottom: 1px solid #000000;} #navfb {width: 990px;margin: 0px auto;height: 35px;} #navfb .nav-left {width: 305px;float: left;} #navfb .nav-left a {display: block;padding: 8px;float: left;color: #FFFFFF;text-decoration: none;margin: 5px 0px 0px;} #navfb .nav-left a:hover {color: #FFFFFF;text-decoration: none;background-color: #6d84b4;} #navfb .search {float: left;width: 415px;} .field {margin:5px 0px 0px;float:left;width:385px;height:21px;line-height:27px;text-indent:10px;font-family:arial, sans-serif;font-size:1em;color:#333;background: #fff;border:solid 1px #d9d9d9;border-top:solid 1px #c0c0c0;border-right:none;} #submit {cursor:pointer;margin:5px 0px 0px;width:25px;height: 25px;line-height:0;font-size:0;text-indent:-999px;color: transparent;background: url(http://lh5.googleusercontent.com/-TIkbu8y8NCU/T40QTHAzMgI/AAAAAAAAANE/76hYtLExe2A/s128/ico-search.png) no-repeat #3B5998 center;border: 1px solid #FFFFFF;} #submit:hover {background: url(http://lh5.googleusercontent.com/-TIkbu8y8NCU/T40QTHAzMgI/AAAAAAAAANE/76hYtLExe2A/s128/ico-search.png) no-repeat center #6d84b4;margin:5px 0px 0px;border: 1px solid #FFFFFF;} #navfb .nav-right {float: right;width: 270px;} #navfb .nav-right a {display: block;padding: 8px;float: right;color: #FFFFFF;text-decoration: none;margin: 5px 0px 0px;} #navfb .nav-right a:hover {color: #FFFFFF;text-decoration: none;background-color: #6d84b4;} /* --------------------- Maked By Yori Hadi Putra --------------------- */ </style> <!-- Navbar Facebook By Yori Blog --!> <div id='fb' href='http://yori-comp.blogspot.com'><div id='navfb'><div class='nav-left'><a href='http://yori-comp.blogspot.com'>Yori Blog</a> <a href='/p/contact-us.html'>Contact</a> <a href='/p/daftar-isi.html'>Archive</a> <a href='/p/mesin-kode-warna.html'>KodeWarna</a> </div><div class='search'><form action='search' method='get' name='SUYB'><input class='field' id='s' name='q' type='text'/> <input id='submit' type='submit' value='Search'/> </form></div><div class='nav-right'><a href='http://www.blogger.com/login.g'>Login</a> <a href='#footer'>Bergabung</a> <a href='http://www.facebook.com/yori.haput'>Profile</a> <a href='http://yori-comp.blogspot.com'>Beranda</a> </div></div></div><!-- Jangan lupa visit http://yori-comp.blogspot.com --!>
5. Copy dan paste di HTML/Javascript agan 
6. Sobat perlu mengedit menunya
7. Klik tombol simpan

Perhatikan kode diatas Yori Blog dengan url http://yori-comp.blogspot.com peru diubah dengan Nama Blog Sobat dan URL blog sobat dan sobat blogger perlu halaman dengan nama Daftar Isi, Contact Us dan Mesin Kode Warna atau sobat blogger bisa mengeditnya dengan menu yang lainnya. Selamat mencoba.