Sabtu, 04 Juni 2011

Cara Mengubah Labels menjadi Dropdown Pada Blogger

Bagi kamu yang mempunyai masalah dengan style labels pada blogger, berikut saya mencoba share solusinya. Ketika kita membuat label/kategori pada postingan kita hanya 5-10 mungkin tidak menjadi masalah, bagaimana jika ada 20-30 labels yang kita buat? Tentunya ini akan membuat menu kategori kita tersusun panjang ke bawah dan memakan tempat di sidebar. Kita bisa mengakalinya dengan membuat dropdown labels, tidak seperti menu arsip kita bisa langung mensetnya, karena feature ini tidak ada pada labels style.
Ini juga sekaligus menjawab pertanyaan teman-teman yang dituliskan baik itu di kotak komentar dan chat box. "Mas labels saya panjang ke bawah bisa gak dibuat dropdown menu?", "Gimana cara buat menu dropdown label seperti dropdown archive pada new blogger?" atau "Bagaimana cara membuat dropdown menu pada labels?". Ok kita akan membahasa hack singkatnya.

Lihat gambar berikut biar lebih paham ya..!!!



Berikut langkah-langkah membuatnya:
1. Login ke account blogger kamu

2. Masuk ke Layout > Edit Html dan centang expand widget (jangan lupa untuk mendowload full template kamu dulu) supaya aman" pabila ada sedikit eror/salah edit kita mudah mengembalikan nya!!!!

3. Cari kode berikut

<ul>
   <b:loop values='data:labels' var='label'>
     <li>
       <b:if cond='data:blog.url == data:label.url'>
         <data:label.name/>
       <b:else/>
         <a expr:href='data:label.url'><data:label.name/></a>
       </b:if>
       (<data:label.count/>)
     </li>
   </b:loop>
   </ul>

Note: Jika agak susah untuk mencarinya tinggal pencet saja F3 lalu pada kotak Find copypaste kode berikut: (<data:label.count/>) lalu klik next.

4. Jika sudah ketemu ganti seluruh kode diatas dengan kode dibawah ini:
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
   <option>Select a label</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>

Pada tulisan berwarna merah <option>Select a label</option> bisa kamu ganti dengan kata kamu sendiri misal: kategori, daftar isi, dll.

5. Terakhir Save, dan lihat hasilnya.
Selamat mencoba ya semoga bermanfaat"

2 komentar:

  1. Thanks Ya Om,,,Kunjungi Juga Ya...
    http://unikuz.blogspot.com..Yah Cuma Promosi Doang...Gak maksa

    BalasHapus
  2. mahhhh makasih banget mas., mau minta tolong seklain ni mas.. biar mantep.. kok arah crop nya ke atas ya mas, gak ke bawah. kalau di buat ke bawah caranya gimana mas... samal. priyo

    BalasHapus

Nekt....