Membuat Menu Navigasi Bergerak di Blog

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…..


Post a Comment

64 Comments

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

    ReplyDelete
    Replies
    1. yah jangan diminum sama gelas-gelasnya mas :d

      Delete
  2. 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

    ReplyDelete
    Replies
    1. Sama sama sob, silakan dicoba dan semoga berhasil

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

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

    ReplyDelete
    Replies
    1. Ini cara membuat menu navigasi yang ada di atas header mba :)

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

      Delete
  4. Replies
    1. Boleh sob, request apa yah, asal jangan request kulkas aja : -d

      Delete
  5. 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?

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

      Delete
  6. mungkin maksudnya navigasi scroll ya gan..

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

      Delete
  7. 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

    ReplyDelete
    Replies
    1. Mangga kang dicoba nanti, semoga modemnya sehat lagi :d

      Salam sukses dan sehat selalu buat kang Hadi dan ubi cilembuunya

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

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

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

      Delete
  9. 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...

    ReplyDelete
    Replies
    1. :-d bener tuh mas, tapi kan itu salah satu hiburan ngeblog mas

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

      langsung tekdung kang prakteknya...

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

    ReplyDelete
    Replies
    1. Silakan kang, demonya di template yang sedang saya pake ini kang, diatas header

      Delete
  11. Wah, kayaknya keren tuh. Kapan2 praktek. :v

    ReplyDelete
    Replies
    1. Oke sob silakan bisa dicoba kapan-kapan, makasih kunjungannya

      Delete
  12. 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

    ReplyDelete
    Replies
    1. Iya mas, bagusan yang orisinil kan, mahal harganya :)

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

    ReplyDelete
    Replies
    1. Iya sob sebenarnya sederhana buat yang sudah tahu mah yah :d

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

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

      Delete
  15. ternyata hanya sedikit kodenya
    Bisa dipraktekin nih

    ReplyDelete
    Replies
    1. Iya sob, silakan boleh dipraktekin kalo cocok sama templatenya

      Delete
  16. 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 :)

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

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

      Delete
  17. wah bisa di coba nih mastah :D

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

    ReplyDelete
    Replies
    1. iya mba yang diatas header itu, itu namanya menu navigasi...

      Delete
  19. 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 :)

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

      makasih kunjunganya, semoga bisa manfaat :)

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

    ReplyDelete
  21. 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

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

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

    ReplyDelete
  24. Thanks mas ini tutor yg saya search2 :D

    ReplyDelete
  25. ini dia kode css yang ane butuh

    thank's udah share gan

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

    ReplyDelete
  27. 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 :)

    ReplyDelete
  28. 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 !!

    ReplyDelete
  29. 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...

    ReplyDelete
  30. 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...

    ReplyDelete
  31. Sip mas, tipsnya manfaat banget buat newbie seperti saya.

    ReplyDelete