Membuat Menu Dropdown bagi Blogger Pemula

Seharusnya artikel ini sudah saya tulis sejak pertama kali menggunakan template dengan fasilitas 2 menu dengan menu ke 2 drop down. Tapi sejauh ini saya masih mengamati bagaimana seluk-beluk penyusunan kode-kodenya. Pastinya kamu tahu juga, susunan kode HTML bukan merupakan bahasa yang mudah dipahami terutama bagi para pembuat tutorial dengan sistem belajar (blog) otodidak

Mungkin cuma sedikit namun dengan adanya tutor berikut ini dapat memberikan harapan baru bagi kalian yang ingin mencoba menu drop down, untuk pengembangan menu bisa kalian lakukan sendiri karena ini hanya panduan kecilnya saja.

Untuk tutorial kali ini saya akan menggunakan template gratisan yang berasal dari btemplate, yang bernama "Virtuale"(kamu bisa memilih template yang lain) dengan versi template tanpa slide(Virtuale without slider).


Di sini, kamu tidak perlu menambahkan kode-kode yang terlalu panjang dan rumit, melainkan hanya merubahnya sedikit. Karena hal itu akan sangat membingungkan terutama bagi pengguna template gratisan dari web-web designer template (termasuk saya)

Keuntungannya, kamu bisa memilih berbagai model drop down yang telah tersedia dan kemudian diterapkan ke blog.

Pertama kali terapkan/apply pada template blog kamu(jika memungkinkan terlebih dahulu kamu coba pada blog khusus uji coba) pada edit HTML,  cari kode berikut ini:

<ul class='menus menu-secondary'>

lebih lengkapnya adalah sebagai berikut:

<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='children'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Dvd</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>

<li><a href='#'>Health</a>
<ul class='children'>
<li><a href='#'>Childcare</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>
<li><a href='#'>Uncategorized</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Pengaturan:

1. untuk kata yang berwarna putih adalah adalah nama dari drop downnya
2. untuk kode berwarna biru adalah Url postingan/entri pada blog kamu(bisa juga dibiarkan tetap "#" jika kamu hanya ingin menggunakannya sebagai navigasi bagi subkategorinya)

Dibawah ini adalah contoh menu drop down dari template blog saya

<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Fasilitas</a>
<ul class='children'>
<li><a href='http://dhanynurdiansyah.blogspot.com/p/banner.html'>Pertukaran Banner dan Link</a></li>
<li><a href='http://dhanynurdiansyah.blogspot.com/p/banner-teman.html'>Banner Kamu</a></li>
<li><a href='http://dhanynurdiansyah.blogspot.com/p/link-teman_25.html'>Link Kamu</a></li>
</ul>
</li>
<li><a href='http://dhanynurdiansyah.blogspot.com/p/blog-page_6063.html'>Informasi Situs</a></li>
<li><a href='http://dhanynurdiansyah.blogspot.com/p/daftar-isi.html'>Daftar Isi</a></li>
<li><a href='#'>Alat</a>
<ul class='children'>
<li><a href='http://dhanynurdiansyah.blogspot.com/p/blog-page_8205.html'>Color Picker</a></li>
<li><a href='#'>Doctors</a></li>
</ul>
</li>  
</ul>
</div>
</div>
<div style='clear:both;'/>
 

nah sekian tutorial dari saya, semoga berhasil dan jangan lupa tinggalkan komentar ya.