Membuat Floating Menu / Fixed Menu di Blog - Floating Menu (Menu Melayang) atau sering juga disebut dengan "Fixed Menu" yang intinya adalah menu yang selalu berada di atas, walaupun blog di scroll sampai bawah.
Cara membuat floating menu / fixed menu ini sudah direquest oleh beberapa sahabat, namun baru saat ini saya buat tutorialnya. Untuk lebih jelasnya,sahabat bisa lihat menu paling atas di blog ini, atau lihat screenshoot dibawah ini :
Konsep CSS dasar dari Floating Menu ini sebenarnya sangat simpel, sebagai contoh :
#floating_menu{?width:100%;position:fixed;top:0;}
tinggal dimasukan tambahan-tambahan lain yang diperlukan, seperti background, height, z-index, a, color, dll.
Saat ini saya coba share 2 warna floating menu yaitu Biru ala Kaskus, seperti blog ini, dan Minimalis (berwarna hitam)
Floating Menu Blue Style
Simpan kode ini 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:02px 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_menuul{list-style: none;margin:0 auto;width:970px;}#ki_floating_menuulli{float:left}#ki_floating_menuullia{line-height:34px;padding:015px;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_menuullia:hover{background-color:rgba(255,255,255,0.125);color:white;}
Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>
<!-- Floating Menu-->?<divid='ki_floating_menu'><ul><listyle='border-left:1px solid rgba(30, 30, 30, 0.125);'><ahref='/'><imgalt='Home'border='0'src='http://4.bp.blogspot.com/-EjgIhPH-_8k/T2X5jYfOJZI/AAAAAAAABmw/yA1YFlwMqRU/s1600/home.png'style='padding:0px;'/></a></li><li><ahref='#'>Menu 1</a></li><li><ahref='#'>Menu 2</a></li><li><ahref='#'>Menu 3</a></li><li><ahref='#'>Menu 4</a></li><li><ahref='#'>Menu 5</a></li></ul></div>
Edit Menu 1- 5 dan Home tidak usah di edit.
Floating Menu Minimalist Style
Simpan kode ini di atas
]]></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_blackul{list-style: none;margin:0 auto;width:970px;}#ki_floating_menu_blackulli{float:left}#ki_floating_menu_blackullia{line-height:34px;padding:015px;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_blackullia:hover{background-color:#666;color:white;}
Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah
</head><!-- Floating Menu-->?<divid='ki_floating_menu_black'><ul><listyle='border-left:1px solid #555'><ahref='/'><imgalt='Home'border='0'src='http://2.bp.blogspot.com/-kodysCW2shE/UXjGba74koI/AAAAAAAAD7I/wm2vEcaWIxo/s1600/home2.png'style='padding:0px;'/></a></li><li><ahref='#'>Menu 1</a></li><li><ahref='#'>Menu 2</a></li><li><ahref='#'>Menu 3</a></li><li><ahref='#'>Menu 4</a></li><li><ahref='#'>Menu 5</a></li></ul></div>
Semoga bermanfaat