Membuat Label Kategori dalam bentuk Drop Down

Pada template standard, biasanya label yang ditampilkan hanya berbentuk flat atau standard. dan kadang kalau kita sudah banyak membuat postingan Tampilan label sangat panjang ke bawah, dan ini sangat menganggu, serta membuat tampilan blog kita kurang profesional. 

Namun tahukah sahabat jika tampilan label standard tersebut bisa dimodifikasi dengan menjadikannya menu drop down...? Nah, label menu dropdown ini akan membuat sidebar blog lebih rapi lagi jika diberikan sedikit sentuhan atau modifikasi. Contohnya seperti di bawah ini :

Well, sobat mungkin tertarik memodifikasi label category setelah sobat melihat contoh gambar diatas dan jika ia, berikut caranya : 

1. Silahkan login ke akun  blogger sahabat
2. klik Template » Edit HTML 
3. centang Expand Template Widget. 
4. Langkah selanjutnya, cari 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 expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

    <b:if cond='data:display == &quot;list&quot;'>

      <ul>

      <b:loop values='data:labels' var='label'>

        <li>

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

            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>

          <b:else/>

            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

          </b:if>

          <b:if cond='data:showFreqNumbers'>

          </b:if>

        </li>

      </b:loop>

      </ul>

    <b:else/>

      <b:loop values='data:labels' var='label'>

        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

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

            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>

          <b:else/>

            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

          </b:if>

          <b:if cond='data:showFreqNumbers'>

            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>

          </b:if>

        </span>

      </b:loop>

    </b:if>

  </div>

</b:includable>

</b:widget>

5. Kemudian ganti kode tersebut di atas 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 style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Choose a Category</option> <b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
</div>
</b:includable>
</b:widget>

6. Sebelum sahabat meng-klik tombol simpan/save, saya sarankan untuk mengklik pratinjau terelebih dahulu untuk melihat hasil sementara dan jika sudah merasa sudah pas, nah baru sahabat boleh klik simpan...!

Sementara ini dulu yang bisa saya bagikan pada kesempatan kali ini, semoga dilain waktu dan kesempatan saya bisa membuat artikel yang bermanfaat lainnya, salam Petualang Amatir.!