Cara Membuat Tampilan Label Dropdown | CATATAN SAIF - Tutorial Blogger

Cara Membuat Tampilan Label Dropdown


Assalamu'alaikum,wr.wb


Maaf untuk tutorial sebelumnya saya salah dalam memberikan cara dan script yang benar,namun sekarang sudah saya perbaiki, untuk kali ini mudah2an berhasil. Hari ini masih bagi2 tutorial blog lagi setelah pada postingan di hari hari yang lalu tentang memodifikasi tampilan label pada kategori/label halaman blog, dalam tutorial kita kali ini saya juga akan mengangkat suatu judul 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. 

Langsung aja kita ketutorialnya :
  • Pertama Login to blog
  • Pilih " Template " lalu klik " Edit HTML "
  • Tekan tombol CTRL+F (tulis judul label diblog sobat yang akan diganti),sebagai contoh seperti widget label saya "MUSLIM BERBAGI",lalu Enter.nah disitu akan ada kode seperti dibawah ini :
 <b:widget id='Label1' locked='false' title='Judul Label Sobat' type='Label'/>
Setelah ketemu silahkan sobat ganti semua code yang berada dibawah kode tersebut sampai kode </b:widget> dengan code dibawah ini:
<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>
Judul</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>
  • Selesai dan simpan 

Catatan Penting :
  • Sobat cukup ganti semua kode dibawah kode <b:widget id='Label1' locked='false' title='Judul Label Sobat' type='Label'/> sampai batas code </b:widget>. artinya kode </b:widget> jangan sampai ikut terhapus
  • Code tulisan warna hijau , adalah judul widget sobat,silahkan anda ganti yang di inginkan.
  • Code tulisan warna merah, adalah judul label dalam dropdown,silahkan ganti sesuai keinginan. 
  • Code tulisan warna biru, berguna untuk menunjukkan berapa banyak artikel dalam sebuah kategori atau biasa disebut dengan counter label. Bila anda tidak ingin menunjukkan counter labelnya silahkan hapus code tersebut.
Untuk hasilnya akan seperti pada gambar diatas,atau bisa lihat demonya diblog milik sobat blogger DISINI

Bagaimana??minat mencoba...hew
Selain dengan cara tersebut diatas,kita juga bisa mengubah widget agar tidak memakan tempat dengan cara membuat fungsi scroll, untuk tutorialnya sobat bisa baca di catatan saya DISINI 
Silahkan percantik blog sobat sesuai dengan keinginan , ^^
Demikianlah tutorial saya kali ini,semoga bermanfaat..



2 komentar

oke berhasil,tdinya g bisa,eh ternyata kode /b:widget nya g boleh ikut kehapus ya,hehe

iya mba,kode /b:widget jgn sampai ikut trhapus.

Silahkan tinggalkan Kritik dan Saran Sobat dibawah sini :
Gunakan Akun openID / Google+ / Blogger agar ada pemberitahuan untuk catatansaif. Boleh Copas asal ada sumbernya ya.. untuk sedikit hargai kerja keras orang lain aja..
Centang "Notify Me" agar ada pemberitahuan balasan dari saya.
Mulai 2016 Komentar dengan menyertakan Link Aktiv / No Aktiv akan dihapus, jadi gunakan openID saja.