Cara Membuat Menu Melayang (Floating Menu)

Hai Sobat Blogger, udah tahu Floating Menu? Atau boleh juga disebut Menu Melayang. Kali ini saya akan posting Cara Membuat Floating Menu. Floating menu ini agak berbeda dengan posting saya sebelumnya yaitu Cara Membuat Menu Drop Down Tanpa Edit HTML atau pun Cara Membuat Menu Drop Down Menggunakan Kode HTML. Floating menu ini akan berposisi melayang terus di atas header blog walaupun kita scroll ke bawah. Sobat tertarik? Lets cekidot!!

Step 1: Masuk akun blog kamu.

Step 2: Pilih 'Tamplate" lalu "Edit HTML". (Jangan lupa pilih "Cadangkan/Pulihkan)

Step 3: Cari kode ]]></b:skin>. (Gunakan Ctrl + F agar mudah dan cepat)

Step 4: Copy-paste kode di bawah ini tepat di atas kode ]]></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;}

Keterangan:

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

Step 5: Cari kode </head>.
Step 6: Copy-paste kode di bawah ini tepat di bawah kode </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/AVvXsEihpcROIj02t0PhybQvAgvwVDafbs88spqqa-75BdXc0dpppFva2BB3oKdWwOzLCsCMNwaD3CvT7YIwkNAvjMDnqfEIG6QxQq169jdiFWsCsS4Rhd-amYCQcup4YtoeOvXBynDfJ2y2BBY/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='http://agopoenya.blogspot.com/2012/08/daftar-isi-blog-agopoenya.html'>Index Blog</a></li>
<li><a href='https://www.facebook.com/ago.part2'>Facebook</a></li>
<li><a href='https://twitter.com/mangkunuklir'>Twitter</a></li>
<li><a href='http://www.blogger.com'>Log In</a></li>
</ul>
</div>

Keterangan:

• Ganti warna merah dengan URL blog kamu.
• Ganti warna biru dengan nama menu blog kamu.

Step 7: SAVE

Selamat mencoba!!

Posted in: Tutorial Blog