Cara Membuat Menu Melayang Setelah Discroll (Sticky Menu)

Cara Membuat Menu Melayang Setelah Discroll (Sticky Menu)

Nah sekarang saya akan share Cara Membuat Menu Melayang Setelah Di Scroll Di Blog, Cekidot.....

Menu ini setelah di scroll sampai kebawah akan terus keliatan :D, keren kan, ini punya kang ismet loo... :)

Pengen tau caranya gimana ?, langsung aja disimak :

[-]Menu Melayang Minimalis Style

Demo

1. Masuk ke blogger
2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl + F) kemudian letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Floating Menu Minimalis*/
#ki_floating_menu_black{background-color: #333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000;}
#ki_floating_menu_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;color:#cacaca;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #000;display:block;text-decoration:none;border-right: 1px solid #555;}
#ki_floating_menu_black ul li a:hover{background-color:#666;color:white;}

4. Kemudian cari kode </head> dan letakkan kode dibawah ini tepat dibawah kode </head>

<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
  <li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu15beW2WdhFwFZCkRfBLHCwXjT2hkfyDpBculwb1xUcU4ZFXuvwlyvf3gy48e2IzQ5i7c-KBvZ1sUNJFW6iiEUDRLVhhLdQQTIYcAom5870fIrpExPgquuICOmzSMRSVd1xqtr5lOHmo/s1600/home2.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> 

5. Selesai, Silahkan di Edit

Keterangan :
Ganti kode yang berwarna hijau dengan ukuran blog agan
Ganti kode yang berwarna biru dengan link tujuan,
Ganti huruf yang berwarna merah dengan teks terserah agan, contoh : Contact Me

 Semoga Bermanfaat.

Ingin Copas Gunakan Sumber gan!!