Saturday, 25 April 2015

Bagaimana Cara Membuat Header Menu di Blog Blogspot

Bagaimana Cara Membuat Header Menu Blog di Blogspot
Bagaimana cara membuat header menu di blog blogspot? Mungkin beberapa di antara teman semua ada yang belum tahu bagaimana sih membuat header menu di blog, terutama untuk pengguna blogspot ya. Sebenarnya kalau mau googling, ini banyak sekali di google.

Sebenarnya apa sih manfaat dari header menu blog ini? Banyak sekali, selain mempercantik tampilan blog hal lain diantaranya adalah sebagai navigasi, mempermudah pengunjung blog untuk mencari tulisan kita berdasarkan kategori/ label tertentu. Ataupun mengarahkan pengunjung untuk mengetahui suatu halaman tertentu di blog kita, misal about me atau contact.


Header Menu


Lalu, bagaimana cara membuat header menu di blog?
Bagi pengguna blogspot, sangat mudah sekali. Dengan kode HTML sederhana kamu bisa mempercantik blog kamu dengan header menu ini.

1|  Masuk ke Dashboard.
2| Buka menu Layout, kemudian klik add a gadget.
3| Cari widget HTML/ JavaScript, dan pastekan kode di bawah ini.

<ul class='menu' id='menu-mainmenu'>
<li><a href='Link URL'>Label</a>
<ul class='sub-menu'>   
        <li><a href='
Link URL'>Sub Label</a></li>
        <li><a href='
Link URL'>Sub Label</a></li>
    </ul>
</li>
<li><a href='
Link URL'>Category</a>
<ul class='sub-menu'>   
        <li><a href='
Link URL'>Sub Label</a></li>
        <li><a href='
Link URL'>Sub Label</a></li>
    </ul>
</li>

</ul>

3| Dan pada kolom title, isikan "header-menu", lalu klik Save.

Isikan Link URL dengan link label/ link artikel kamu dan Sub Label isikan dengan nama label kamu. Sesuaikan saja sesuai kebutuhan.

Dan header menu blog pun sudah terpampang nyata di blog kamu. Semoga tutorial bagaimana cara membuat header menu di blog blogspot kali ini bermanfaat ya, selamat mencoba. Silakan modifikasi sendiri sesuai kebutuhan.

Image Source: foto by Staffage via kaboompics with graphics added by handdriati

Let me know if you enjoy this post ya! Happy Blogging!

28 comments:

  1. Header menu sama kayak page gitu ya mbak..??

    ReplyDelete
    Replies
    1. iya mbak, kurang lebih sama hehe...Page menu/ Header menu/ Menu bar...

      Delete
  2. Gemes.....banget klo nemu blog yg admin'y wanita ngebahas yg berbau coding....mau cubit

    ReplyDelete
    Replies
    1. wooo...emang baunya nyampe situ ya mas? hahha...

      Delete
  3. Thank you infonyaaa. Mau coba ah :)

    ReplyDelete
    Replies
    1. sama2, semoga sukses nyobanya :)

      Delete
    2. Mbaaakkk.. huhuuuu... aku udah cobain ini. Tapi HTML gadgetku ada di kanan. So, enggak di atas jadinya headernya. What shoul I do? Deuuuhh... gaptek segaptek-gapteknya -_____-

      Delete
    3. di drag (tekan-tahan-trus geser) aja mba pindahin kebawah header blog.
      kalau gak, coba add gadgetnya yang dibawah/ di atas header langsung.
      mudah2an ngerti ya, sukses mba :)

      Delete
  4. Coba ah.....kalau WP..ada yg gampang gini juga nggak?

    ReplyDelete
    Replies
    1. hmmm...saya kurang ngerti soal WP jadi gtw :D

      Delete
  5. saya cobain ah, kayaknya oke juga nih

    ReplyDelete
    Replies
    1. sip, silakan mas...tinggal modif2 aja sendiri, ini cuma dasarnya aja hehe...

      Delete
  6. waaaa kemaren baru ngutek utek templeta blog terus stuck karna menu bar ini, dan pas banget blog walkingan ke tempat mba handriati bahas ini, aaa thankyou ya mba ^^

    ReplyDelete
  7. Kalau udah ketemu PC mau nyoba ahh...

    ReplyDelete
  8. Waah cocok nih, ada rencana mau bikin blog baru, ini ntar aku cobain deh. Makasih sharingnya yaaa

    ReplyDelete
    Replies
    1. sama-sama mba, semoga bermanfaat ya :)

      Delete
  9. header menu itu yang sebelah mana ya? page/laman? atau yang jadi headline terpampang nyata pake foto gede? mau coba tapi takut jadi berantakaaannnn *galau*

    ReplyDelete
    Replies
    1. iya mbak annisa, kurang lebih sama hehe...Page menu/ Header menu/ Menu bar...Keknya punyamu uda ada deh mbak...
      kalau yang ini cuma coding dasarnya aja sih, kalau modifnya biar berwarna-warni bisa dimodif sendiri hehe...

      Delete
  10. kalo mau ada sub menunya gimana kak? hehe

    ReplyDelete
    Replies
    1. itu sudah termasuk sub menu kok mba, bica dicoba dulu :D

      Delete
  11. keren2 harus sering nongkrong sini biar blog tambah cakep

    ReplyDelete
  12. Mbak, header menu ini kalo udah diterapkan nantinya waktu buka dari handphone jadi kaya menu dropdown gitu ngga mbak? Atau beda?

    ReplyDelete
    Replies
    1. kalau yang ini gak muncul di tampilan mobile...yg menu dropdown itu kalau pakai tabs baru muncul ditampilan mobile.

      Delete
  13. postingan2nya ngebantu banget. Makasiii mbak ({})

    ReplyDelete

Terimakasih sudah berkomentar yang sopan dan membangun. Jangan bosan untuk berkunjung lagi ya. :)