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.
floating menu
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 :

floating menu

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

Wah bermanfaat sekali...
trims, mampir atuh kang ;)

riefsaz.blogspot.com

Balas

makasih sob.. avatarnya kaya Ariel :)

Balas

Sepertinya bagus kalau dicoba di blog saya nih Kang Ismet

Balas

Thanks Gan Info nya ... :D

Jangan Lupa Kunjungi Balik

Balas

keren banget, kang..
ijin nyobain dulu, thx sblmnya :)

Balas

okey... siap laksanakan :)

Balas

silahkan sob, dicoba2.. :)

Balas

Kalo sudah ada menu diatas kalo dipasang floating begini bisa gak mas. . .

Balas

bisa aja sob, tapi apa ga kebanyakan nantinya? :)

Balas

Wah kayak floating menu nya kang Ismet nih! :) | Keren mas.. :D

Balas

iya sob, soalnya banyak yang minta :)

Balas

Hatur Nuhun Kang, langsung abdi anggi :)

Balas

kang, saya mau tanya kalau mau ganti warna backgroundnya bisa ngga. bukan warna biru tapi warna lainnya!

Balas

bisa sob.. tinggal edit CSS nya, yang background color

Balas

Kang..

Cara buat Tukar link Gimana..?

Balas

daftar aja di e-referrer sob :)

Balas

keren menu floating nya kang ..
makin mantap upami ngopi hideung hehe

Balas

Alhamdulillah udah bisa mas. . .menu yang sebelumya ane tindas aja :D

.mas buatin juga dong tutor buat related post with thumbnail. Coz di template ane gk bisa mas.makasih :)

Balas

Kalau manfaatin menu atas yang udah gimana caranya, bisa gak? Habisnya kalo sampe ada 2 baris menu jadi jelek kayaknya

Balas

wah keren banget loh mas :)

Balas

Tambah 234 nya kang :)

Balas

Bisa sob, kan itu ada patokannya, asal top:0 dan position:fixed

Balas

bukan sob, hanya fixed aja

Balas

Wahhh... nice info sobb :) Ane lagi nyari2 yang beginian XD

Di tunggu Kunbal nya : http://aldizavr.blogspot.com

Balas

Maksih kang ismet banyak membantu nich

Balas

Tambah lagi ini pengetahuan saya untuk modifikasi menu di blog dari Kang Akismet untuk menu fixednya.Trims ya Kang.

Balas

xixixi... klo Akismet itu plugin anti-spam WP

Balas

tutorial yang sangat bagus sekali gan...

Balas

kang bagaimana caranya untuk mengaplikasikan menu dropdown di floating menu ini? bisakah? kalo bisa gmn caranya kang?
mohon info jelasnya :)

Balas

cakep bgt dah ah ahahhaa

Balas

makasih gan apresiasinya

Balas

bisa aja.. tinggal tambah ul sama li.. plus CSSnya :)

Balas

sudah saya coba ko blm berhasil ya kang, saya msh blm ngerti dmn kesalahannya, kode elemennya seperti apa kang untuk menambah dropdownnya? saya bingung, mohon tampilkan kode elemen untuk nambahin dropdown menunya kang :)

Balas

Makasih kang bermanfaat banget nih, ntar ane praktekin :D

Balas

silahkan... logonya KFC :)

Balas

wah mantap nih.. terima kasih gan..


http://fikrykamaludin.blogspot.com

Balas

Buat koleksi ah...bgus juga nih menu....!!!
Mampir dong gan ksini
www.46english.blogspot.com

Balas

jangan dikoleksi.. diterapkan aja :)

Balas

kang, tambahin donk pada artikel cara membuat drop downnya, saya yang awam ini gak terlalu paham CSS.

Balas

bro heighnya bisa di tambah sdikit ngga bro ?

Balas

bisa... banyak juga bisa :)

Balas

Kang kalo di padukan dengan menu pencarian bisa ga..??

Balas

bisa aja... tinggal tambahkan kode CSS sama HTMLnya

Balas

hxxp://www[dot]dte[dot]web.id/2012/09/membangun-aplikasi-quick-search-dengan.html

Ane pingin bikin yang seperti Tutorialnya kang Taufik Nurrohman Tapi masih belum ngerti carangepasinnya .. :)

Balas

atasnya ga usah dibaca.. dari yang judul : Integrasi Widget ke Blogger aja...
tambahkan kode HTMLnya pada area <div id='ki_floating_menu'>

Balas

Maaf Ni kang jadi ngerepotin :) Udah Bisa css juga udah ane sesuain .. Tapi baru 90% Sesuai keinginan Masih ada satu kendala yaitu Formnya
ada di bawah menu floatingnya marginnya udah saya kurangi tapi malah di belakang floating kira2 yang kurang apanya ya kang.. ? :)

[catatan]Blog Ane h**p://ceseses.blogspot.com[/catatan]

Balas

lumayan juga sih ngebongkarnya sob...
gimana kalau di akali pada css #search-form-feed tambah margin-top:-60px;margin-right:77px;z-index:9999; pada ki_floating_menu, z-index dikurangi

Balas

Hasilnya Mantep sih kang , Tafi Menu 1,2,3,4,5 kaya ketutup gitu kang..

Itu bertumpuk ya kang. ?? ada solusinya ga kang..?? Sorry Nanya mulu masih belajar nih kang.. seru nih kayanya banyak tantangan tapi , masih bingung.. heheh :)

Balas

silahkan diacak2 aja... menu jai ketutup karena pengaruh padding:0 75%, coba margin yang di edit...

Balas

Hehe, Ga sia sia Nanya Terus.. Saya buang padding:0 75%, Dan
bener saja dari marginnya kang.. saya selipin margin left atas intruksi akang 770px ?? Matur NuWun kang

Balas

jangan ngacak2 template aja.. ayo update artikelnya sekarang :)

Balas

kang ismet memang top markotop,hehe.. terimakasih kang sudah mau berbagi

Balas

kang ismet tolong pencerahanya, saya ingin membuat floating menu pada blog saya tanpa harus merubah warna dll gimana kang? ini alamat blog saya adjieumbara.blogspot.com

Balas

Pke aja yang minimalis style di atas sob :)

Balas

Kang , Kalo Menu Floating yang pas mau scroll ke Bawah gimana ? Jadi Menu nya ada di tengah-tengah terus pas Scroll Ke bawah dia malah ngikut gitu,jadi Fixed,di tunggu Tutorial nya

Balas

ada contoh? kunrang ngerti nih :)

Balas

Kang, mau tanya
kalau mau tambahin social media itu letaknya jadi di bawah,.

agar letaknya sama dengan yang lainnya. atur CSS nya gimana ?

Balas

Kang, ari template anu super seo tiasa teu kang ???

Balas

tiasa template naon wae oge kang

Balas

Ass Wr Wb, bade tumaros kang upami menuna janten teu full contoh :
http://d-indo.blogspot.com/

Balas

wass... tinggali deui tempat penyimpanan na kang... bukan dibawah wrapper tapi langsung di bawah </head>

Balas

selamat siang bang.. salam kenal... saya ada banyak pertanyaan, kiranya abang bersedia menjawabnya.. pertanyaan saya pertama, bagaimana dari floating menu ini, kita tambahkan dropdown??? saya benaran masih buta belajarnya.. seharian kotak katik gak ngerti juga... selain itu saya juga mau tambahan kotak search, tapi kotak search ini yang saya maksud ini kotak search hasil modifikasi dengan menggunakan search-form-feed yang saya dapat di beberapa tutorial, kotak ini ada edit css dan htmlnya, pertanyaan saya, apabila saya menggabungkan menu dan kotak search ini, kok jadinya dua baris ya?? padahal saya pingin satu baris dengan menu navigasi tersebut... jadi sejajar gitu... tolong bantuannya..... kalau berkenan, tolong berkomentar di blog saya, soalnya, email saya jarang buka....http://sikkahoder.blogspot.com/

Balas

kang , kalau ingin menambah dropdown di menu tersebut . . . bagaimana caranya ya

Balas

Work mas.. walaupun bukan pakai model yg seperti di post ini, tapi saya padukan script dari mas dg drop down menu dari blog lain akhirnya bisa mas... makasih mas..

mohon bantuannya utk mmprabaiki tampilan floatnya di blog saya mas.
http://imtaq-dan-iptek.blogspot.com
tx.

Balas

klo boleh kang ismet, share cara buat floating yang ada di blog ini. heheheh

Balas

bang tolongin dong cara buat menu dropdownnya, saya masih pemula belum begitu paham soalnya.... atau kalau enggak kasih tau code css dropdownnya saja nanti saya pasang sendiri...kalau nempatin codenya saya bisa tapi kalau buat codenya itu loh yg belum paham...please di tanggapi

Balas

Kang Ismet Bagaiman agar menu yg lain tidak tertutup lihat Screnshot ini
Tidak memakai menu floating kelihatan => http://prntscr.com/2ido3e
Pakai Menu floating tertuutup menu floating => http://prntscr.com/2idnx7
bagaimana agar tidak tertutup

Balas

saya bantu jawab yah :D

coba tambahin aja margin-top pada kode wrappernya. sesuaikan dengan menu nya mas

Balas

Terimakasih Jawabannya saya coba dulu

Balas

kang bisa download tempalte macam kang ismet punya nggak ?
smoga bisa ya :D krna saya lagi mencari template kayak gini :)

Balas

Gini kang, saya punya keluhan di blog http://www.seputarinternet.net/
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--

Balas

maaf OOT cara membuat tombol di kotak pesan singkat di atas kotak komentar bagaimana ?

Balas

Kang, kalo buat menu header seperti akang Adhy, kumaha ya caranya, mohon petunjuk????? terimakasih.

Balas

mantep kang tutorialnya... makasih heheh :)

Balas

kode CSSnya gimana ya gan?

Balas

Poskan Komentar


×
Chat