Friday, May 17, 2013

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzXHmGM1LorX_FlN9KWpEDE35RJqapun5y1eh2iyxuNBESC6JAUfiHHruYLlZSV0-iBczqu-JaL7hkocltjFx6BbK5hRq4xncAulMkaorEhMPmNuJQRD2CHzwPBv3yAPCr7V3ix7BWq50/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!

Related Posts

Cara Membuat Menu Melayang Di Atas Header / Floating menu
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

64 komentar

Tulis komentar
avatar
May 21, 2013 at 10:11 PM

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

Reply
avatar
May 22, 2013 at 1:57 PM

sama2 bagus, cumang saya menggunakan yang ini karena lebih simpel

Reply
avatar
June 19, 2013 at 5:20 PM

wah keren gan, mirip kaskus

Reply
avatar
August 2, 2013 at 11:58 AM

TERIMKASIH BANG SANGAT MEMBANTU SAYA

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

Reply
avatar
Anonymous
September 8, 2013 at 9:31 PM

Kode scriptnya bisa dicoba ini mas mudahan bisa melayang menunya.

Reply
avatar
September 16, 2013 at 4:19 PM

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
September 17, 2013 at 12:47 AM

maco gan, tanks atas infonya, kapankapan main gan kerumah

penggunacerdas(.)blogspot(.)com

Reply
avatar
September 18, 2013 at 4:25 PM

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

Reply
avatar
September 19, 2013 at 7:32 PM

iya gan mudah-mudahan bisa melayang :D

Reply
avatar
September 19, 2013 at 7:36 PM

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
September 19, 2013 at 7:49 PM

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
September 20, 2013 at 11:31 PM

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

Reply
avatar
September 21, 2013 at 5:45 PM

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

Reply
avatar
Anonymous
September 29, 2013 at 12:13 PM

gan , ukuran blog di blogger itu berapa px ?

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

makasih informasinya kang :)

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

Reply
avatar
Anonymous
October 25, 2013 at 2:07 PM

Boleh juga tutorialnya,tambahan ilmu.Thanks..

Reply
avatar
October 26, 2013 at 8:49 PM

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

mohon d jawab...??

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

Reply
avatar
October 26, 2013 at 8:51 PM

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

kunjungi juga
http://jeseito.blogspot.com

Reply
avatar
October 27, 2013 at 7:48 PM

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

Reply
avatar
October 28, 2013 at 11:05 PM

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

Reply
avatar
November 3, 2013 at 1:17 PM

cari aja di search engine blog ini

Reply
avatar
November 4, 2013 at 10:00 PM

Mau tanya gimana caranya supaya ada menu dropdownnya,.

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

minta dibuatin htmlnya

Reply
avatar
November 6, 2013 at 4:20 PM

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

Reply
avatar
Adi
December 2, 2013 at 12:41 AM

supaya ada menu dropdownnya gimana ini gan..

Reply
avatar
December 9, 2013 at 11:08 AM

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

Reply
avatar
December 12, 2013 at 2:56 PM

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

Reply
avatar
December 12, 2013 at 3:03 PM

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

Reply
avatar
December 27, 2013 at 8:46 PM

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

Reply
avatar
December 28, 2013 at 2:01 PM

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

Reply
avatar
January 8, 2014 at 7:10 PM

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

Reply
avatar
January 10, 2014 at 2:24 PM

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

Reply
avatar
January 16, 2014 at 10:31 PM

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 19, 2014 at 5:34 AM

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

Reply
avatar
January 25, 2014 at 9:52 PM

muantap banget tapi ke bawah gimana y

mohon dijawab

Reply
avatar
March 25, 2014 at 8:43 PM

bang cara mengisi untuk smua menu menunya gmna ya??

Reply
avatar
Anonymous
April 10, 2014 at 12:27 PM

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

Reply
avatar
April 23, 2014 at 9:17 PM

cara masukin entrinya gimana ??

Reply
avatar
April 25, 2014 at 7:42 PM

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

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

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

Reply
avatar
June 26, 2014 at 9:51 PM

silakan dipraktekan kalau ada waktu..

Reply
avatar
July 5, 2014 at 6:16 AM

terimakasih kas segera di coba^^

Reply
avatar
February 10, 2019 at 2:01 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================