Met pagi semuaa… Pada postingan kale ini saya mo membahas Cara Membuat Menu Melayang Di Atas Header, So saya akan membahas tentang Cara Membuat Floating menu atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, apakah berbeda? Yoo I jelas sama dong prend..., yang membedakan hanyalah desain penampilanya saja , kegunaanya tetap sama Sob
Ini adalah sreenshotnya:
Oke langsung aja 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
Selajutnya , 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/AVvXsEhb9kKrvoP_qtioKtbj8DzRklc7wmiQUupu0PCT_AP7T24M-WLnw_2EOqedZj7gbd8VukMfobc-yHZA9gj5ej_cCReIgKSPJjUGo794ERUqs_-CQ69DWoYpqsp0tHBE6-6v2fi6Qngpd3w/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 “
Gampang kan...!!! Semoga bermanfaat..
EmoticonEmoticon