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{Lalu diberi CSS tambahan untuk mempercantik tampilannya, seperti; height, z-index, font, color, dll.
width:100%;
position:fixed;
top:0;
}
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 */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.
#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;}
<!-- Floating Menu-->Setelah itu save template, lalu bandingkan tampilannya dengan demo yang sudah dibuat oleh Kang Ismet di bawah ini:
<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>
Keren dan bermanfaat bro
ReplyDeleteowh gitu ya...omong2 yang tanda # itu fungsinya apa gan?
ReplyDeletenice gan
ReplyDeleteMakasih gan ijin pasang
ReplyDeletewow keren gan, boleh dicoba nih tipsnya :D
ReplyDeleteini yang fixed ngambang di atas ya gan?
ReplyDeletemantavv, ijin coba gann..
ReplyDeletemakasih yaa gan tuturialnyaa
ReplyDeleteijin nyobaa buat blog ane hehe
keren tutorialnya gan...tambah wawasan nih
ReplyDeleteKeren nih kayaknya kalo diterapin di blog ane, tapi ini bener gak bikin blog kita berat kan ?
ReplyDeletenice share bro,, tak copy html nya wkwkw ijin bokmark sekalian
ReplyDeletetutorialnya lengkap gan, bagus buat bahan belajar untuk pemula kyak saya
ReplyDeleteWah keren ini gan persis sama kaskus
ReplyDelete