Tutorial Membuat Horizontal Menu Di Blogspot

Secara default blogspot template, saat kita memasang Horizontal Menu Navigasi maka yang terpasang adalah menu Pages List. Bagaimana cara agar menu page tersebut kita ganti dengan menu Link List untuk membuat kategori sesuai label? Berikut adalah tutorialnya. Perhatikan, tutorial ini juga dapat digunakan bagi mereka yang hendak membuat Horizontal Menu, triknya adalah dengan memasang widget Pages dahulu.

Tutorial Membuat Horizontal Menu Di Blogspot

Langkah Pertama

Pastikan widget Pages sudah terpasang. Caranya dari Design > Add a Gadget lalu pilih widget Pages. 

Langkah Kedua

Setelah itu dari Design pergilah ke Edit HTML. Kemudian ingat satu hal penting untuk tutorial kali ini, jangan beri centang opsi "Expand Widget Templates".

Langkah Ketiga

Dengan Ctrl + F pada browser cari kode <b:widget id='PageList Dan kita akan menemukan kode semacam ini:

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>

Langkah Keempat

Ganti kode berwarna biru dengan kode di bawah ini:

<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

<ul>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<li class='selected'>

<a expr:href='data:blog.homepageUrl'>Home</a>

</li>

<b:else/>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

</b:if>

<b:loop values='data:links' var='link'>

<b:if cond='data:blog.url == data:link.target'>

<li class='selected'>

<a expr:href='data:link.target'><data:link.name/></a>

</li>

<b:else/>

<li><a expr:href='data:link.target'><data:link.name/></a>

</li>

</b:if>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Langkah Kelima

Save Template.

Langkah Keenam

Kembali ke Design > Page Elements, sekarang sudah terdapat menu Horizontal Navigasi. Berikutnya adalah memasang widget Link List dengan link yang diinginkan.

Selesai.

Referensi:

Blogger Plugins