Yang Terbaru

Subscribe Here!

Dapatkan Update Informasi Terbaru dari KANG MUROI Melalui Email

Blog Stats

Membuat Menu Navigasi Bergerak di Blog

By On 26.3.13

Membuat Menu Navigasi Bergerak di Blog | Assalamu ‘alaikum sobat Muro’i El-Barezy, sebenarnya saya agak bingung membuat judul postingan ini, membuat menu bergerak, emang ada gitu menu yang bergerak? Hehe… yah mungkin maksudnya jika mousenya kita arahkan ke atas dan bawah seakan menu itu ikut bergerak, jadi judulnya membuat menu navigasi bergerak di atas header blog.
navigasi bergerak
Sebenarnya saya bukan spesialis tutorial blog, apalagi spesialis penyakit dalam hehe…, tapi terinspirasi dari pertanyaan sobat Ferry Nurse mengenai menu di atas header ini, ya sudah saya share saja disini, daripada nyari-nyari link tutorialnnya juga pusing tidak ketemu. Okelah langsung saja bagaimana cara membuat menu bergerak diatas header blog ini. Berikut ini langkah mudahnya :

Langkah pertama adalah seperti biasa masuk ke dasbord blog sobat.
Berikutnya klik Edit HTML dan silakan centang “Expand Widget Templates”
Kemudian cari kode ]]></b:skin>
Langkah berikutnya adalah copy paste code CSS di bawah ini diatas kode ]]></b:skin> tadi :
/* Top navigation */
#top-nav{background:#333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:28px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}#top-nav ul{margin:0 auto;width:970px}#top-nav ul li{float:left}#top-nav ul li a{line-height:28px;padding:0 15px;color:#fff;font-size:13px;text-shadow:0px -1px 0px #000;display:block;text-decoration:none}#top-nav ul li a:hover{color:#7cae15}
Nah kalo sudah melakukan langkah diatas, sekarang coba cari kode </head>.
Dan jika sudah ketemu kodenya, silakan copy paste script berikut, dan letakkan dibawah kode </head> tadi :
<!-- top navigation -->
<div id='top-nav'>
<ul>
<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>
Jangan lupa simpan utak-atik template sobat dan sekarang menu diatas header yang bisa bergerak naik turun sudah jadi deh, tinggal menyesuaikan dengan template sobat, diantaranya :
  • Angka 970px silakan ganti sesuaikan dengan lebar body template sobat.
  • Ubah warna menu navigasi dan font sesuai selera.
  • Tanda #, isi dengan URL menu yang sobat inginkan dan silakan sesauikan nama menunya dan juga sobat bisa menambahkan dengan yang lainnya.
Demikian tutorial ringan menganai bagaimana membuat menu navigasi diatas header yang bisa bergerak. Semoga manfaat buat yang memerlukan. Happy blogging…..


64 komentar

selamat siang mas wah ES nya enak banget mang seger panas2 minum ES Cendol heheh... heeeeeeeeeem sangat membantu sekali sobat triknya trmks mang infonya

Langsung di posting requestnya nih...Maklum kalau bahasa tutorial saya juga sulit ngomongnya cuma bener ini maksudnya

Terima kasih banyak Kang Muroi...tak coba edit dech...
Sekali lagi terima kasih

sebentar2, maksudnya gimana sih bang? :o @-)

boleh request juga gak nih :d

Kalau bergerak2 terus apa ndak capek tuh link nya?
Kang..sepertinya ini kurang cocok di blog saya. mungkin ada trik lain seputar blog? tak tunggu yah?

mungkin maksudnya navigasi scroll ya gan..

hehee...sebenernya dari 3 hari yang lalu, sebelum modemku ngadat udah mo nanya yang ditanyain kang ferry...pas kalau gituh jodoh namanya y kang.
n'tar ah kalau modemku sip mo praktek.

salam sehat selalu y kang

tambah lelet gak sob... kasin nanti blognya keberatan ngangkatnya... b-(

aku males terlalu banyak ngutak atik templet, om...
soalnya lihat kebiasaan diri sendiri
kalo lihat templet terlalu keren suka lupa sama konten blognya
malah sibuk kaya nemu mainan baru...

yah jangan diminum sama gelas-gelasnya mas :d

nAh ini saya mau praktekan di blog lainnya,kebetulan menunya belum saya pasang,hatur thksyu

demonya yang mana ya kang?

Wah, kayaknya keren tuh. Kapan2 praktek. :v

iya nih, mantep banget Mas El.
kalo saya masih males utak-atik (padahal memang nggak bisa, hehe)
biar orisinil dulu aja, yang penting asyik, hehe

Sama sama sob, silakan dicoba dan semoga berhasil

Ini cara membuat menu navigasi yang ada di atas header mba :)

Boleh sob, request apa yah, asal jangan request kulkas aja : -d

Ya emang udah nasibnya gitu sih, gerak melulu. :d

Ya mungkin itu sob, tapi yang penting paham lah maksudnya. :-d

Mangga kang dicoba nanti, semoga modemnya sehat lagi :d

Salam sukses dan sehat selalu buat kang Hadi dan ubi cilembuunya

Kalo pengaruh sih kayanya ada sob, jadi kalo merasa buat berat mungkin ngga usah dipasang sob

Kalau yang ini tinggal ditambah "position:fixed" saja sob :)

Klo modem lambat saya punya solusi nya kang.dijamin wuzzz...

Kapan2 di praktekin kang.makasih!sampai sekarang saya masih ngebet pengen pasang emoticon seperti pinya kang EL, sayang nya belum bisa.

ternyata hanya sedikit kodenya
Bisa dipraktekin nih

Nice posting sob.. awalnya bingung gimana menu bergerak itu... sebenernya bergerak atau justru diem sob? hehehe.. kalau kata orang sono sih Floating Menu.. kalau ga salah :)

Ya sebenarnya sih ga bergerak kang menu-nya, malah diem...

Kalo di terjemahin berarti menu yang mengambang yah, apaan yang ngambang tuh. :-d

Iya sob, silakan boleh dipraktekin kalo cocok sama templatenya

Silakan kang di coba...
Kalo emo justru malah mudah banget masangnya kang, asal teliti pasti berhasilkan, dicoba lagi

Iya sob sebenarnya sederhana buat yang sudah tahu mah yah :d

Iya mas, bagusan yang orisinil kan, mahal harganya :)

Oke sob silakan bisa dicoba kapan-kapan, makasih kunjungannya

Silakan kang, demonya di template yang sedang saya pake ini kang, diatas header

:-d bener tuh mas, tapi kan itu salah satu hiburan ngeblog mas

wah bisa di coba nih mastah :D

berarti kayak panel yg di atas itu kan mas? buat menunjukkan laman?

Cocok buat semua template ya mas .... :)
Kya nya tutor mas mur...lebih simple dan sederhana..namun hasinya keren mas :)
---
Sipp mas..pastinya bermanfaat bgt nih...yg lagi cari tutorial ini... :)
#kapan2 minta request juga ah...hehe :)

digoyang mang templatenya, :)

jeh gitu aja ga mudeng, pdhl jelas bgt postingannya. navigasi fixed yg paling atas. :-t

tutorinya kapan-kapa boleh dicoba ni hehehe
makasih om tutorialnya
oh ya ane follow om

mantep tuh skripnya! tapi gak mo masang ah.. wong kadang gue gak suka kalo di blog orang diikuti kayak gitu! emang gue cowok apaan? bahaha

silakan sob, trimakasih kunjungannya

iya mba yang diatas header itu, itu namanya menu navigasi...

sebenarnya tidak semua template cocok dengan navigasi ini mas, disesuaikan saja..

makasih kunjunganya, semoga bisa manfaat :)

diah mah emang gituh kang...antepin sesukanya diah azh...xixixii

langsung tekdung kang prakteknya...

mantab...singkat dan gak bikin repot. mahesa and salute

kalau tombol box ini gmana mas ?? yg ada pada reply, older post dll itu ??

Alhamdulillah sudah berhasil dipasang barusan...Terima kasih Kang
Sukses selalu buat Kang Muroi

mantap tutorialnya gan... =p~

Thanks mas ini tutor yg saya search2 :D

ini dia kode css yang ane butuh

thank's udah share gan

saya ucapin terima kasih gan buat berbagi ilmunya,sangat bermanfaat banget

gan mau tanya, kalo menunya mau kaya di blog agan gimana ya? ditambah apa scriptnya?
Soalnya saya udah coba di blog saya tapi ada titik titik ul dan li.

Btw tutornya ngebantu banget gan :)

Kang... artikel anda sangat bermanfaat... saya banyak sampe ngiler karena pengen tau beberapa hal yang selama ini saya cari-cari.

saya mo tanya nii kang...

Cara bikin MENU kedap-kedip... seperti menu "BUKU TAMU" diatas itu gimana kang..?? di balas nya ke blog saya aja kang... hitung2 kunjungan balik.. ni blog saya kang http://amatookomputer.blogspot.com/

Maaf saya koment nya pake "Anonymous" kang... lagi malas Login.

Sukses !!

Wah..menarik sekali tutorialnya.. Akan saya coba di blog saya.. Tapi sekarangkan expant widgetnya udah gak bisa lagi kalau kita mau edit blog.. Jadi susah kita cari kode2 htmlnya.. Itu yg buat saya bingung...

Keren ni tutorialnya gan, mau langsung praktek ni, makasih ya gan..salam kenal. Sekalian nanya ni gimana caranya mau buat menu agan yang hitam paling atas itu gimana ya? yang ada menu home kontak saya dan telusuri website, mohon ifonya gan...

OK mas tipsnya mantab jadinya

Sip mas, tipsnya manfaat banget buat newbie seperti saya.