Cara membuat label drop down di blog

Batas catatan - Dalam tutorial kita kali ini saya juga akan membahas tentang tehnik memodifikasi label dengan sistem DROP DOWN. Fungsi ini sangat berguna buat para teman teman yang memang halaman blognya memiliki banyak label.

Bila anda sebagai pemilik halaman blog anda patut mencobanya untuk mempercantik sekaligus dan tidak memakan banyak ruang widget pada halaman blog.

Kinerja dari tutorial saya kali ini adalah label. jadi saya rasa anda harus lebih dulu memasang widget label pada halaman anda, silahkan edit tampilannya agar lebih menarik dilihat para pengunjung halaman anda.Dengan mengedit sedikit kode tag htmlnya, tutorial kali ini akan membuat label blog tampil elegan. Lihat tampilan label pada blog ini, hasilnya akan seperti itu.

Langkah-langkah membuat label drop down di blog

1. Memasang widget label pada halaman anda

2. Login to blog
3. Pilih " Template " lalu klik " Edit HTML "
4. Cari kode

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

5. Scroll ke bawah sedikit hingga anda menemukan kode ini :

<b:includable id='main'>

6. kode <b:includable id='main'> sampai </b:includable> gantikan dengan kode ini :

<b:includable id='main'> <b:if cond='data:title'>
<h2><data:title/></h2> </b:if> 
<div class='droplabdown'>
<select class='dropdown-select' 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>

Sampai disini tampilan label anda sudah menjadi dropdown

Langkah selanjutnya tinggal kita atur tampilannya.

Langkah-langkahnya :

1. Cari kode ini ]]></b:skin>

2. Lalu paste kode di bawah ini di atas kode tersebut

/* Dropdown Label */
.droplabdown select{outline:none;cursor:pointer;transition:all .6s ease-out}
.droplabdown{display:inline-block;position:relative;overflow:hidden;width:100%;border-bottom:1px solid rgba(0,0,0,0.1);height:40px;line-height:40px;color:#7f8c8d}
.droplabdown:before,.droplabdown:after{content:'';position:absolute;z-index:2;top:15px;right:12px;width:0;height:0;line-height:40px;border:4px dashed;border-color:#999 transparent;pointer-events:none}
.droplabdown:before{border-bottom-style:solid;border-top:none}
.droplabdown:after{margin-top:8px;border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);}
.dropdown-select{background:#fff;color:#000;position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:40px;line-height:20px;font-size:13px;border:1px solid rgba(0,0,0,0.1);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.droplabdown select:hover{border-color:rgba(0,0,0,.34);}
.droplabdown select:focus{outline:none;cursor:pointer;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);}
.dropdown-select>option{background:#fafafa;position:relative;display:block;margin:3px;text-shadow:none;outline:0;border:0;cursor:pointer}

Sekarang save template anda dan lihat hasilnya. selamat mencoba