Cara Memasang Dropdown Menu Pada Blog

Assalamu'alaikum wr.wb
Maaf kalo artikel ini cuma copas, karena BlogHWP banyak disibukkan dengan tugas2, dan ada yg me-request artikel ini, jadi saya copykan langsung dari sumbernya.
Silahkan dibaca baik2..
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:

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 berwarna merah 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)
3. jika ingin menambahkan subkategori lagi tinggal letakkan:

<ul class='children'>

kemudian tambahkan:

 <li><a href='url post/menu'>nama menu</a></li>
 <li><a href='url post/menu'>nama menu</a></li>

dan akhiri dengan:

 </ul>
 </li>

Berikut contoh menu drop down dari template blog saya:

<ul class='menus menu-secondary'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>My Profile</a>
<ul class='children'>
<li><a href='http://facebook.com/DN.DHAN'>Facebook</a></li>
<li><a href='http://twitter.com/dhanyn10'>Twitter</a></li>
<li><a href='http://pinterest.com/dhany99487/'>Pinterest</a></li>
</ul>
</li>
<li><a href='dhanynurdiansyah.blogspot.com/2012/01/daftar-isi-default.html'>Sitemap</a></li>
<li><a href='#'>Sahabatku</a>
<ul class='children'>
<li><a href='http://sayatra.blogspot.com/'>Putra</a></li>
<li><a href='http://riekeariyanti.blogspot.com/'>Rieke</a></li>
<li><a href='http://murasaki-fujiwara.blogspot.com/'>Fuji</a></li>
</ul>
</li>
<li><a href='#'>Banner / Link</a>
<ul class='children'>
<li><a href='http://dhanynurdiansyah.blogspot.com/2012/01/Tukar-banner-atau-link.html'>Tukar Banner / Link</a></li>
<li><a href='http://dhanynurdiansyah.blogspot.com/2012/01/friend-banner.html'>Friend Banner</a></li>
<li><a href='http://dhanynurdiansyah.blogspot.com/2012/01/friend-link.html'>Friend Link</a></li>
</ul>
</li>   
<li><a href='#'>Color Code</a>
<ul class='children'>
<li><a href='http://dhanynurdiansyah.blogspot.com/2012/01/kode-warna.html'>Box Color Code</a></li>
<li><a href='http://dhanynurdiansyah.blogspot.com/2012/01/color-picker.html'>Circle Color Code</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>*/

Tambahan: jika ingin membuat menu lagi tapi tanpa efek drop down(maksudnya tanpa subkategori) maka pakai kode berikut ini:

<li><a href='URL-POST/MENU'>NAMA MENU</a></li>

Catatan:untuk single menu diatas harus diawali dengan tag <li> dan diakhiri tag </li>
Contohnya terdapat pada menu "sitemap"
nah sekian tutorial dari saya, semoga berhasil dan jangan lupa tinggalkan komentar ya.