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.

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

Indah Primadona25 April 2015 at 14:01
Header menu sama kayak page gitu ya mbak..??
Wahab Saputra25 April 2015 at 15:32
Gemes.....banget klo nemu blog yg admin'y wanita ngebahas yg berbau coding....mau cubit
Lia Harahap25 April 2015 at 16:44
Thank you infonyaaa. Mau coba ah :)
MunaMadrah25 April 2015 at 19:37
Coba ah.....kalau WP..ada yg gampang gini juga nggak?
Anak Nelayan25 April 2015 at 22:35
saya cobain ah, kayaknya oke juga nih
Halo Hasta26 April 2015 at 07:03
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 ^^
Irly26 April 2015 at 16:39
Kalau udah ketemu PC mau nyoba ahh...
Turis Cantik27 April 2015 at 07:06
Cobain ah thanks sharingnya
Hidayah Sulistyowati27 April 2015 at 07:42
Waah cocok nih, ada rencana mau bikin blog baru, ini ntar aku cobain deh. Makasih sharingnya yaaa
Annisa Steviani27 April 2015 at 08:38
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*
Adesi29 April 2015 at 17:52
kalo mau ada sub menunya gimana kak? hehe
khairiah9 September 2015 at 18:44
keren2 harus sering nongkrong sini biar blog tambah cakep
Nurul Hikmah S.11 March 2016 at 21:54
Mbak, header menu ini kalo udah diterapkan nantinya waktu buka dari handphone jadi kaya menu dropdown gitu ngga mbak? Atau beda?
Unknown14 July 2016 at 13:43
postingan2nya ngebantu banget. Makasiii mbak ({})