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.
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 Comments
selamat siang mas wah ES nya enak banget mang seger panas2 minum ES Cendol heheh... heeeeeeeeeem sangat membantu sekali sobat triknya trmks mang infonya
ReplyDeleteyah jangan diminum sama gelas-gelasnya mas :d
DeleteLangsung di posting requestnya nih...Maklum kalau bahasa tutorial saya juga sulit ngomongnya cuma bener ini maksudnya
ReplyDeleteTerima kasih banyak Kang Muroi...tak coba edit dech...
Sekali lagi terima kasih
Sama sama sob, silakan dicoba dan semoga berhasil
DeleteAlhamdulillah sudah berhasil dipasang barusan...Terima kasih Kang
DeleteSukses selalu buat Kang Muroi
sebentar2, maksudnya gimana sih bang? :o @-)
ReplyDeleteIni cara membuat menu navigasi yang ada di atas header mba :)
Deletejeh gitu aja ga mudeng, pdhl jelas bgt postingannya. navigasi fixed yg paling atas. :-t
Deleteboleh request juga gak nih :d
ReplyDeleteBoleh sob, request apa yah, asal jangan request kulkas aja : -d
DeleteKalau bergerak2 terus apa ndak capek tuh link nya?
ReplyDeleteKang..sepertinya ini kurang cocok di blog saya. mungkin ada trik lain seputar blog? tak tunggu yah?
Ya emang udah nasibnya gitu sih, gerak melulu. :d
Deletemungkin maksudnya navigasi scroll ya gan..
ReplyDeleteYa mungkin itu sob, tapi yang penting paham lah maksudnya. :-d
Deleteya2 mang xixixixix
ReplyDeletehehee...sebenernya dari 3 hari yang lalu, sebelum modemku ngadat udah mo nanya yang ditanyain kang ferry...pas kalau gituh jodoh namanya y kang.
ReplyDeleten'tar ah kalau modemku sip mo praktek.
salam sehat selalu y kang
Mangga kang dicoba nanti, semoga modemnya sehat lagi :d
DeleteSalam sukses dan sehat selalu buat kang Hadi dan ubi cilembuunya
Klo modem lambat saya punya solusi nya kang.dijamin wuzzz...
Deletetambah lelet gak sob... kasin nanti blognya keberatan ngangkatnya... b-(
ReplyDeleteKalo pengaruh sih kayanya ada sob, jadi kalo merasa buat berat mungkin ngga usah dipasang sob
Deleteaku males terlalu banyak ngutak atik templet, om...
ReplyDeletesoalnya lihat kebiasaan diri sendiri
kalo lihat templet terlalu keren suka lupa sama konten blognya
malah sibuk kaya nemu mainan baru...
:-d bener tuh mas, tapi kan itu salah satu hiburan ngeblog mas
Deletediah mah emang gituh kang...antepin sesukanya diah azh...xixixii
Deletelangsung tekdung kang prakteknya...
nAh ini saya mau praktekan di blog lainnya,kebetulan menunya belum saya pasang,hatur thksyu
ReplyDeletedemonya yang mana ya kang?
DeleteSilakan kang, demonya di template yang sedang saya pake ini kang, diatas header
DeleteWah, kayaknya keren tuh. Kapan2 praktek. :v
ReplyDeleteOke sob silakan bisa dicoba kapan-kapan, makasih kunjungannya
Deleteiya nih, mantep banget Mas El.
ReplyDeletekalo saya masih males utak-atik (padahal memang nggak bisa, hehe)
biar orisinil dulu aja, yang penting asyik, hehe
Iya mas, bagusan yang orisinil kan, mahal harganya :)
DeleteKalau yang ini tinggal ditambah "position:fixed" saja sob :)
ReplyDeleteIya sob sebenarnya sederhana buat yang sudah tahu mah yah :d
DeleteKapan2 di praktekin kang.makasih!sampai sekarang saya masih ngebet pengen pasang emoticon seperti pinya kang EL, sayang nya belum bisa.
ReplyDeleteSilakan kang di coba...
DeleteKalo emo justru malah mudah banget masangnya kang, asal teliti pasti berhasilkan, dicoba lagi
ternyata hanya sedikit kodenya
ReplyDeleteBisa dipraktekin nih
Iya sob, silakan boleh dipraktekin kalo cocok sama templatenya
DeleteNice 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 :)
ReplyDeleteYa sebenarnya sih ga bergerak kang menu-nya, malah diem...
DeleteKalo di terjemahin berarti menu yang mengambang yah, apaan yang ngambang tuh. :-d
wah bisa di coba nih mastah :D
ReplyDeletesilakan sob, trimakasih kunjungannya
Deleteberarti kayak panel yg di atas itu kan mas? buat menunjukkan laman?
ReplyDeleteiya mba yang diatas header itu, itu namanya menu navigasi...
DeleteCocok buat semua template ya mas .... :)
ReplyDeleteKya 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 :)
sebenarnya tidak semua template cocok dengan navigasi ini mas, disesuaikan saja..
Deletemakasih kunjunganya, semoga bisa manfaat :)
digoyang mang templatenya, :)
ReplyDeleteayo kang :d
Deletetutorinya kapan-kapa boleh dicoba ni hehehe
ReplyDeletemakasih 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
ReplyDeletemantab...singkat dan gak bikin repot. mahesa and salute
ReplyDeletekalau tombol box ini gmana mas ?? yg ada pada reply, older post dll itu ??
ReplyDeletemantap tutorialnya gan... =p~
ReplyDeleteThanks mas ini tutor yg saya search2 :D
ReplyDeleteWokey :)
ReplyDeleteini dia kode css yang ane butuh
ReplyDeletethank's udah share gan
Good Artikel
ReplyDeletesaya ucapin terima kasih gan buat berbagi ilmunya,sangat bermanfaat banget
ReplyDeletegan mau tanya, kalo menunya mau kaya di blog agan gimana ya? ditambah apa scriptnya?
ReplyDeleteSoalnya saya udah coba di blog saya tapi ada titik titik ul dan li.
Btw tutornya ngebantu banget gan :)
(h)
ReplyDeleteKang... artikel anda sangat bermanfaat... saya banyak sampe ngiler karena pengen tau beberapa hal yang selama ini saya cari-cari.
ReplyDeletesaya 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...
ReplyDeleteKeren 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...
ReplyDeleteOK mas tipsnya mantab jadinya
ReplyDeletethanks infonya
ReplyDeleteSip mas, tipsnya manfaat banget buat newbie seperti saya.
ReplyDelete