Cara Buat Top Menu Melayang Seperti Facebook

Hi sobat,

Sebelum mulai dengan langkah - langkahnya, saya ingin sedikit bercerita tentang postingan kali ini. 

Awalnya, saya cuman ingin mencari Cara Membuat Navbar melayang seperti Facebook. Dan saya pun menemukannya di postingan blognya Purworejo Blogger Community . 

Postingan sebenarnya dapat anda lihat di Sini. 

Dan setelah melihat kode-kodenya, Saya pun mendapatkan ide untuk membuat menu yang melayang seperti facebook layaknya navbar yang melayang seperti facebook.

Setelah mengutak-atik kodenya, saya akhirnya dapat membuat menu yang melayang di atas blog. 

Untuk membuat menu seperti itu, silahkan lihat langkahnya di bawah:

1. Masuk ke blogger dan pergi ke menu Template, lalu edit HTML.

2. Jika sudah, cari kode ]]></b:skin> , lalu copas kode di bawah ini tepat diatasnya.

/*-- CUSTOM NAVIGATION BAR--*/
* html #mta_bar{position:absolute}
#mta_bar{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit52A_ZfpnYpdHtw8UlzIb4IDac4KJQKf03t2-VWNznux11Icf5cngSjiz8Z7fdibT4QfX4Fl3KgUWY2ElAJXNcBeXHxJhJ1vSF1Q3fOvYIv25Wo49PggAE6RLfQQpAGjuo8A7qmi1C_X8/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/AVvXsEjwNTbYJsASYgTqNCbbvEZgDeccr_HiuUr6a7RJWOFfWLKZxXq_U8MdRy8hyrE0jQDIxGxXo5oTdolyhznlXgMK-au33P4gg4ew2uch2vk1mR1OFPtVzl2teIzAEdg0JITauwjaCXpBUS4/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;
}
3. Sekarang, cari kode Code </body> lalu tempatkan kode berikut tepat di atasnya :

<div id='mta_bar' style='position:fixed;'>

Taruh Kode Menu Kamu disini

</div>

Kode yang berwarna biru kamu ganti dengan kode menu punyamu. Silahkan dapatkan menunya di http://krisantipsdantrik.blogspot.com/2013/05/cara-buat-css-menu-blog-keren.html 

4. Simpan dan lihat hasilnya. Ini yang sudah jadi : 

Nah, selesai sudah perjumpaan kita kali ini, semoga apa yang saya tuliskan berguna bagi anda yang membacanya...