Cara Membuat Menu Melayang (Floating Menu) di Blog

Cara Membuat Menu Melayang (Floating Menu) di Blog - Menu Melayang atau biasa disebut Floating Menu adalah sebuah widget menu yang selalu tetap berada diatas halaman blog, walaupun sudah kita scroll halaman blog tersebut sampai ke bawah. Bila Anda ingin mencoba Membuat Menu Melayang (Floating Menu) di Blog, silahkan simak tutorialnya berikut ini.

Klik Gambar untuk memperbesar

Berikut Cara Membuat Menu Melayang (Floating Menu) di Blog :

1. Login ke Account Blogger Anda.
2. Masuk ke Dasbor Blog.
3. Pilih menu Template, lalu klik Edit HTML.
4. Cari kode ]]></b:skin>, lalu copy kode CSS berikut ini diatas kode ]]></b:skin>.

/* -- Floating Menu by Tutorial Blogz --*/
#menutop{background:#0077AF;font:14px Oswald;width:960px;position:fixed;z-index:9999;top:1px;overflow:hidden;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;text-shadow: -1px -1px 0 #006092;}
#navmenu{margin:0 auto;width:960px;padding:0}
#navmenu ul{float:right;width:auto;margin:0;padding:0;list-style-type:none}
#navmenu ul li{float:right;}
#navmenu ul li a,#nav ul li a:visited{float:right;padding:10px 10px;color:#fff;text-transform:none}
#navmenu ul li a:hover{color:F2F2F2;text-decoration:none;background:#006A9B}

5. Lalu copy kode dibawah ini tepat diatas kode <div id='header-wrapper'>.

<div id='menutop'>
<div id='navmenu'>
<ul>
<li><a href='http://tutorial-blogz.blogspot.com/2012/06/contact-us.html'>Kontak Kami</a></li>
<li><a href='http://tutorial-blogz.blogspot.com/2012/10/pasang-iklan.html'>Pasang Iklan</a></li>
<li><a href='http://tutorial-blogz.blogspot.com/p/kirim-artikel.html'>Kirim Artikel</a></li>
<li><a href='http://tutorial-blogz.blogspot.com/'>Home</a></li>
</ul>
</div>
</div>

Keterangan : 

• Ganti kode berwarna merah dengan judul menu.
• Ganti kode berwarna biru dengan url yang dituju.

6. Klik Save Template. Dan lihat hasilnya pada blog Anda !

Nah, sangat mudah kan? 
Semoga bermanfaat :)