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
Pengen tau caranya gimana ?, langsung aja disimak :
[-]Menu Melayang Minimalis Style
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>
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!!
No comments:
Post a Comment