Cara Membuat Menu Melayang Di Atas Header / Floating menu

Selamat pagi sobat gembel, di pagi ini jogja hujan cuaca jadi mantap.. dan di artikel Kali ini saya akan membahas tentang Cara Membuat Floating menu atau yang sering di sebut juga dengan Membuat menu ikut turun saat mouse di scroll, apakah perbedaannya? yahh jelas sama.., yang membedakan hanyalah desain tampilannya saja tapi kegunaanya tetap sama. Jika kalian pada bingung ini adalah sreenshotnya:

Caranya :

• Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
• Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas ]]></b:skin>.
  
/* Floating Menu */
#ki_floating_menu{
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;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu 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;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}


• Ganti 970px untuk ukuran blog sobat.
• Ganti 34px untuk ukuran lebarnya

Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->er
<div id='ki_floating_menu'>
<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/AVvXsEhQkN9RVDx77oETBPjpyd6H4PlJroE8ia9Jnu9DWcwknmSdETbSScRU9AJtbzs1BZovHSfhGdPemdjufB1wZ5ZcT12sJptWdlg1WYJScWUP00bVBy0tXCN256wurdA5S81KcAlclNV6ZC0/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>

Klik save, dan lihat hasilnya, semoga bermanfaat...