Membuat Floating Menu / Fixed Menu di Blog
0 views
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 :
Saat ini saya coba share 2 warna floating menu yaitu Biru ala Kaskus, seperti blog ini, dan Minimalis (berwarna hitam)

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: 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 dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head><!-- 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='http://4.bp.blogspot.com/-EjgIhPH-_8k/T2X5jYfOJZI/AAAAAAAABmw/yA1YFlwMqRU/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>
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_black ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu_black ul li{float:left}
#ki_floating_menu_black ul li a{line-height:34px;padding:0 15px;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_black ul li a:hover{background-color:#666;color:white;}
Ganti 970px dengan ukuran blog sobat. Untuk mendeklarasikannya, simpan kode ini di bawah </head>
<!-- Floating Menu-->
<div id='ki_floating_menu_black'>
<ul>
<li style='border-left:1px solid #555'><a href='/'><img alt='Home' border='0' src='http://2.bp.blogspot.com/-kodysCW2shE/UXjGba74koI/AAAAAAAAD7I/wm2vEcaWIxo/s1600/home2.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>
Semoga bermanfaat
88 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Disini saya punya keluhan tentang menu fixed. tolong mampir di blog saya,, trus lihat menu Banner NYA..
Menu fixednya sudah jadi, tapi sayangnya gak bisa berada dipaling atas,, yang saya pengen, apabila di geser kebawah maka gambarnya naik keatas terus berhenti di bagian paling atas..
Apa kangismet bisa bantu,, tolong posting tutorialnya.. makasih kang..
--Ade Minz--
smoga bisa ya :D krna saya lagi mencari template kayak gini :)
Tidak memakai menu floating kelihatan => http://prntscr.com/2ido3e
Pakai Menu floating tertuutup menu floating => http://prntscr.com/2idnx7
bagaimana agar tidak tertutup
coba tambahin aja margin-top pada kode wrappernya. sesuaikan dengan menu nya mas
mohon bantuannya utk mmprabaiki tampilan floatnya di blog saya mas.
http://imtaq-dan-iptek.blogspot.com
tx.
http://d-indo.blogspot.com/
kalau mau tambahin social media itu letaknya jadi di bawah,.
agar letaknya sama dengan yang lainnya. atur CSS nya gimana ?
Mampir dong gan ksini
www.46english.blogspot.com
http://fikrykamaludin.blogspot.com
mohon info jelasnya :)
Di tunggu Kunbal nya : http://aldizavr.blogspot.com
.mas buatin juga dong tutor buat related post with thumbnail. Coz di template ane gk bisa mas.makasih :)
makin mantap upami ngopi hideung hehe
Cara buat Tukar link Gimana..?
ijin nyobain dulu, thx sblmnya :)
Jangan Lupa Kunjungi Balik
trims, mampir atuh kang ;)
riefsaz.blogspot.com