Cara Membuat Floating Menu Ringan ala Kaskus di Blog

Cara Membuat Floating Menu tanpa Javascript

Ini adalah tutorial cara membuat Floating Menu pada blogger yang selalu berada di posisi atas blog walaupun saat scroll hanya dengan menggunakan CSS tanpa menggunakan .JS (Javascript), sehingga tidak berpengaruh pada loading blog sobat. Menu yang hanya menggunakan CSS sering dipakai para blogger karena simple dan tidak membuat loading berat jika digunakan di blog.

Floating Menu sudah sering kita jumpai di berbagai website berita ataupun lainnya. Tutorial ini saya dapat dari blog Kang Ismet yang ditulisnya beberapa tahun lalu.

Menurut Kang Ismet, konsep dasar Floating Menu ini sebenarnya sederhana, rahasianya ada pada CSS berikut ini:

#floating_menu{
width:100%;
position:fixed;
top:0;
}
Lalu diberi CSS tambahan untuk mempercantik tampilannya, seperti; height, z-index, font, color, dll.

Tampilan Floating Menu yang dibuat oleh Kang Ismet ini mirip sekali dengan tampilan kaskus beberapa waktu lalu, namun tanpa icon Home, dan FJB.

Dan ini adalah CSS untuk mempercantik tampilan floating menu yang harus di letakkan 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 ukuran menu 970px dengan ukuran blog sobat agar tampilannya penuh, atau sobat bisa mengubah dengan ukuran yang diinginkan. Untuk menampilkannya, saya menyarankan untuk meletakkan kode ini di atas <footer. Cara ini untuk mencegah text yang ada di floating menu dijadikan deskripsi pada SERP oleh Google.
<!-- Floating Menu-->
<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/AVvXsEhwrSz2m-MIQnXiVEsaVbB7eBAeOpO2JNWTNebNWU0IBSP-T5rwTcRUEX6R7IePidM-8_uoln22CB6k3_IBLsyf64XfdP9DINbSS0ZqDrTfsAUmSeHYBWJtqMp_RhVv6ZkBdtlaehDCy7k/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>
Setelah itu save template, lalu bandingkan tampilannya dengan demo yang sudah dibuat oleh Kang Ismet di bawah ini:

13 Responses to "Cara Membuat Floating Menu Ringan ala Kaskus di Blog"

  1. owh gitu ya...omong2 yang tanda # itu fungsinya apa gan?

    ReplyDelete
  2. wow keren gan, boleh dicoba nih tipsnya :D

    ReplyDelete
  3. ini yang fixed ngambang di atas ya gan?

    ReplyDelete
  4. makasih yaa gan tuturialnyaa
    ijin nyobaa buat blog ane hehe

    ReplyDelete
  5. keren tutorialnya gan...tambah wawasan nih

    ReplyDelete
  6. Keren nih kayaknya kalo diterapin di blog ane, tapi ini bener gak bikin blog kita berat kan ?

    ReplyDelete
  7. nice share bro,, tak copy html nya wkwkw ijin bokmark sekalian

    ReplyDelete
  8. tutorialnya lengkap gan, bagus buat bahan belajar untuk pemula kyak saya

    ReplyDelete
  9. Wah keren ini gan persis sama kaskus

    ReplyDelete