Cara Membuat Menu Dropdown Katagori Blogger 2

Katagori atau lable pada blogger sering kali kita butuhkan dalam membantu mempermudah pembaca atau pengunjung blog untuk mencari topik dari atikel sesuai katagori yang mereka butuhkan.Namun semakin banyaknya artikel yang kita buat pada blog kita maka akan semakin banyak dan semakin memanjang kebawah daftar katagori tersebut, sehingga akan mengganggu kita dan mengurangi space halaman pada blog kita.Untuk mengatasi masalah tersebut tanpa harus membuang widget daftar katagori dari halaman blog kita ada sebuah solusi yang bisa kita lakukan yaitu membuatnya menjadi menu dropdown Box, dimana yang terlihat hanyalah tombol dropdown box dari daftar kategori pada blog kita dan daftar katagori akan muncul setelah kita mengklik tombol daftar kategori dari dropdown box tersebut.


Dan adapun langkah-langkah membuat Menu Dropdown Katergori ini adalah:

1 . Pertama-tama anda harus sudah memiliki Widget Kategori Atau label pada blog anda jika belum anda bisa membuatnya terlebih dahulu baca di sini

2. Pergi ke blogger dasbor >>> Pilih opsi lainya >>> Templete >>>Back Up Dulu templete anda.

3. Selanjutnya Klik Edit HTML dan Centang kotak kecil Expand Widget Templates.

4. Cari kode di bawah ini gunakan Ctrl + F untuk memudahkan pencarian.

<b:widget id="Label1" locked="false" title="Labels" type="Label">

Kode.....kode...
Kode.....kode..

</b:widget>

5. Setelah anda menemuakan Kode diatas (no.4) hapus dan ganti kode tersebut dengan kode di bawah ini.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label to view</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Keterangan :

Anda bisa meruba kode yang di beri warna diatas.

* Kode yang berwarna merah

<select onchange='location=this.options[this.selectedIndex].value;'>

kode ini merupakan kode label/kategori box Jika anda ingin menyesuaikan box tersebut dengan sidebar anda bisa menambahkan kode css pada templete anda :

.sidebar select {
width: 100%;
padding: 2px;

Simpan kode Css diatas tepat diatas Kode ]]></b:skin> .

* Tulisan yang berwarna hijau

Select a label to view

anda bisa merubahnya dengan kata yang anda inginkan.

* kode yang berwarna biru

(<data:label.count/>)

kode ini merupakan kode Jumlah dari sebuah lable yang posisinya berada di sebelah lable.jika anda tidak menginginkanya anda bisa menghapusnya atau membiarkanya jika anda menginginkanya.

6. Klik pratinjau (Prevew) untuk melihat perubahan.

7. Setelahh berhasil simpan templete anda.

Selesai dan semoga bermanfaat..........