Membuat floating menu atau menu melayang di atas pada blog seperti kaskus

Membuat floating menu atau menu melayang di atas pada blog - Floating menu (menu melayang) pada blog biasa disebut fixed menu yang melayang di atas blog meskipun di scroll ke bawah menu akan tetap berada diatas.

Caranya mudah dengan menggunakan CSS kode berikut contok fixed menu pada tampilan RzShare21 :

Konsep CSS dasar dari Floating Menu ini sebenarnya sangat simpel, sebagai contoh :

#floating_menu{
width:100%;
position:fixed;
top:0;
}

tinggal dimasukan tambahan-tambahan lain yang diperlukan, seperti background, height, z-index, a, color, dll.

langkah langkah membuatnya yaitu :

1. Copy kode dibawah ini di atas kode ]]></b:skin>

/* Menu ala kaskus fixed */
#menu_kaskus{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#menu_kaskus ul{list-style: none;margin:0 auto;width:970px;}
#menu_kaskus ul li{float:left}
#menu_kaskus ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#menu_kaskus ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

2. Jika sudah selanjutnya ganti kode 970px; dengan sesuai ukuran blog sobat.
3. Lalu copy kode dibawah ini tepat dibawah kode </head>

<div id='menu_kaskus'>
<ul>
<li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit5WM_V3A4DHX3awgcrhad53pHO9BrMX6ISSVq6asYzAsUUb5xRGEp9WF6xiGFLSgAUCAva21AwK7zDvMTVdvH0vnntrEgpMgE-7W6mcJ9V5sAg5RbAWVHA_hX_u7u7z2U_d8JcDslqbg/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

4. Jika sudah cek apakah kode berhasil.
5. Ubah a href=# dengan url halaman blog sobat. dan Menu 1-5 ubah dengan nama halaman blog sobat.

sumber : blog.kangismet.net

Semoga Bermanfaat