Cara Membuat Menu Melayang Di Atas Header / Floating menu

Pada postingan sebelumnya saya telah membahas Cara Membuat Menu Melayang Di Atas Header, Kali ini saya akan membahas tentang Cara Membuat Floating menu atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, apakah berbeda? yahh jelas sama dong sob..., yang membedakan hanyalah desain penampilanya saja tapi kegunaanya tetap sama kok.!
jika kalian pada bingung ini adalah sreenshotnya:
Oke langsung aja Caranya:
  • Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
  • Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat 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 untuk ukuran blog sobat.
  • Ganti 34px untuk ukuran lebarnya

Untuk mendeklarasikannya, simpan kode ini di bawah </head>
<!-- Floating Menu-->er
<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>
  • Klik Simpan 
Semoga Bermanfaat!
Previous
Next Post »

65 komentar

Write komentar
Eko Wahyudi
AUTHOR
May 21, 2013 at 10:11 PM delete

Menu Melayang Di Atas Header yang pertama am yg ini bagusan mana?

Reply
avatar
Henry Dwi.s
AUTHOR
May 22, 2013 at 1:57 PM delete

sama2 bagus, cumang saya menggunakan yang ini karena lebih simpel

Reply
avatar
Doni Feryal
AUTHOR
June 19, 2013 at 5:20 PM delete

wah keren gan, mirip kaskus

Reply
avatar
mul sandi
AUTHOR
August 2, 2013 at 11:58 AM delete

TERIMKASIH BANG SANGAT MEMBANTU SAYA

KUNJUNGI BALIK IYA BANG : http://hasil2.blogspot.com/

Reply
avatar
Henry Dwi.s
AUTHOR
August 2, 2013 at 12:39 PM delete

Sama-sama, siap meluncur!

Reply
avatar
infosaja.com
AUTHOR
September 8, 2013 at 9:31 PM delete

Kode scriptnya bisa dicoba ini mas mudahan bisa melayang menunya.

Reply
avatar
Aini Hassan
AUTHOR
September 16, 2013 at 4:19 PM delete

terima kaseh atas tips yang amat berguna ini, amat mudah difahami.
tetapi bisa ngak saudara jelas tentang bagaimana mau buat menu bar seperti saudara lakukan..
contohnya jika saya ke menu tips and tricks saudara, keluar BLOG dan SEO di bawahnya..bagaimana ya mau lakukan begini..terima kaseh..

Reply
avatar
Arie Purnomo
AUTHOR
September 17, 2013 at 12:47 AM delete

maco gan, tanks atas infonya, kapankapan main gan kerumah

penggunacerdas(.)blogspot(.)com

Reply
avatar
Aini Hassan
AUTHOR
September 18, 2013 at 4:25 PM delete

tak faham bagaimana mau sisipkan code,boley ngak saudara tunjukkan contohnya.. :(

Reply
avatar
Henry Dwi.s
AUTHOR
September 19, 2013 at 7:32 PM delete

iya gan mudah-mudahan bisa melayang :D

Reply
avatar
Henry Dwi.s
AUTHOR
September 19, 2013 at 7:36 PM delete

maaf ya jika komentar baru di balas hehe soalnya saya sibuk, Silakan kunjungi http://www.henryds.com/2013/07/cara-buat-menu-dropdown-di-blog.html

Reply
avatar
Henry Dwi.s
AUTHOR
September 19, 2013 at 7:49 PM delete

biar lebih enak sih belajarnya pake video tapi saya gak punya videonya,tapi biar lebih jelas ini caranya: [img]http://4.bp.blogspot.com/-MxQt8PFQMNc/UjrkilBaUDI/AAAAAAAABcs/JsIbYSnSYCw/s1600/tutorial.png[/img] dan selanjutnya ikuti caranya seperti di atas, terimakasih kunjunganya :)

Reply
avatar
Abdul Azis
AUTHOR
September 20, 2013 at 11:31 PM delete

Cara ubah warnanya biar gak biru gimana ya? kok susah bgt

Reply
avatar
Henry Dwi.s
AUTHOR
September 21, 2013 at 5:45 PM delete

Cari kode ini bro #1484CE nanti silakan di ganti sendiri kode warnanya sesuka sobat

Reply
avatar
Mc Kelar
AUTHOR
September 29, 2013 at 12:13 PM delete

gan , ukuran blog di blogger itu berapa px ?

Reply
avatar
October 21, 2013 at 1:40 PM delete

makasih informasinya kang :)

kunjungan balik ya kang http://sikeple211.blogspot.com

Reply
avatar
dunia10
AUTHOR
October 25, 2013 at 2:07 PM delete

Boleh juga tutorialnya,tambahan ilmu.Thanks..

Reply
avatar
Adhe tawakkal
AUTHOR
October 26, 2013 at 8:49 PM delete

sy mau bertax..
bagaimna membuat header melayang seperti blog in

mohon d jawab...??

kunjungi juga
http://jeseito.blogspot.com/

Reply
avatar
Adhe tawakkal
AUTHOR
October 26, 2013 at 8:51 PM delete

sya mau brtax
bagmana cra membuat header melayang...??

kunjungi juga
http://jeseito.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
October 27, 2013 at 7:48 PM delete

ini bro http://www.henryds.com/2013/07/fixed-header-blog-dengan-box-search.html

Reply
avatar
kisikisi bola
AUTHOR
October 28, 2013 at 11:05 PM delete

saran yang bermanfaat sob http://www.kisikisibola.com

Reply
avatar
Henry Dwi.s
AUTHOR
November 3, 2013 at 1:17 PM delete

cari aja di search engine blog ini

Reply
avatar
bagastya hilm
AUTHOR
November 4, 2013 at 10:00 PM delete

Mau tanya gimana caranya supaya ada menu dropdownnya,.

soalnya saya sudah gabungin dengan postingan dropdown anda tapi gagal terus,.,

minta dibuatin htmlnya

Reply
avatar
Henry Dwi.s
AUTHOR
November 6, 2013 at 4:20 PM delete

waduh bro ane blom sempet coba2 deh, nanti ane coba2 dulu biar ada dropdownnya

Reply
avatar
Henry Dwi.s
AUTHOR
November 17, 2013 at 10:32 AM delete

bisa gan cari kode ini #1484CE

Reply
avatar
adi zeverpen
AUTHOR
December 2, 2013 at 12:41 AM delete

supaya ada menu dropdownnya gimana ini gan..

Reply
avatar
Arif Setyo
AUTHOR
December 9, 2013 at 11:08 AM delete

Gan cara masukin kolom search disebelah kiri gimana ya biar lebih penuh

Reply
avatar
December 12, 2013 at 2:56 PM delete

terimakasih bro... ngebantu bgt buat ane yang baru belajar nge-blog...

Reply
avatar
December 12, 2013 at 3:03 PM delete

saya udah coba, bisa dirubah. tapi kok jadi 2 warna. gradient gitu. kenapa ya?

Reply
avatar
December 13, 2013 at 6:00 AM delete

terima kasih tutorialnya mas :)

Reply
avatar
zakiah priska
AUTHOR
December 22, 2013 at 4:39 PM delete

makasih y ...
bantu banget

Reply
avatar
December 27, 2013 at 8:46 PM delete

mas punyaku nggak bisa ke samping tapi malah berdiri? coba mas dilihat http://elbarir.blogspot.com/

Reply
avatar
Dede Suwanda
AUTHOR
December 28, 2013 at 2:01 PM delete

artikel sangat bermanfaat, kunjungi juga, gabung dipeluang bisnis,www.termotivasi-vsi.com

Reply
avatar
January 8, 2014 at 7:10 PM delete

bisa gan, tapi navBar nya ketutup. biar navNar nya gak ketutup gmanan gan?

Reply
avatar
Yazid System
AUTHOR
January 10, 2014 at 2:24 PM delete

kaya'a bagus jg ni gan klw menu'a di buat floating..

Reply
avatar
dedi iskandar
AUTHOR
January 16, 2014 at 10:31 PM delete

makasih Gan tips & Trick nya..Sangat membantu..
Kunjungi juga Blog ane ya,yg udah pake tips'nya.. :D ' Siapa tau ada teman atau atau sodara yang memerlukan perlengkapan Camping & OutBond.
http://www.tendasadulur55.com/ Terima Kasih..

Reply
avatar
January 18, 2014 at 8:40 AM delete

cara ganti warna menunya gimana

Reply
avatar
Zainal Abidin
AUTHOR
January 19, 2014 at 5:34 AM delete

nice info master. tolong juga mampir di zayacellrokanhulu.blogspot.com
blog nya orang belajar otodidak

Reply
avatar
fauhad ziyad
AUTHOR
January 25, 2014 at 9:52 PM delete

muantap banget tapi ke bawah gimana y

mohon dijawab

Reply
avatar
SA
AUTHOR
March 25, 2014 at 8:43 PM delete

bang cara mengisi untuk smua menu menunya gmna ya??

Reply
avatar
tafshare
AUTHOR
April 10, 2014 at 12:27 PM delete

klo mbuat menu kayak di techcrunch gmn gan???
by tafshare.blogspot.com

Reply
avatar
April 23, 2014 at 9:17 PM delete

cara masukin entrinya gimana ??

Reply
avatar
Rizki Agusta
AUTHOR
April 25, 2014 at 7:42 PM delete

Terimakasih tutorialnya. Kunjungi blog saya ya http://accounting-media.blogspot.com/

Reply
avatar
June 26, 2014 at 4:46 PM delete

ini ni yang saya cari , coba nanti kalau ada waktu saya praktekin mas ganteng....
www.mahadewapulsa.com

Reply
avatar
Henry Dwi.s
AUTHOR
June 26, 2014 at 9:51 PM delete

silakan dipraktekan kalau ada waktu..

Reply
avatar
July 5, 2014 at 6:16 AM delete

terimakasih kas segera di coba^^

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon