Cara Menampilkan Ikon dalam postingan pada Label Tertentu

Pada blogger anda dapat menampilkan ikon, teks atau gambar tertentu untuk setiap label / kategori tertentu di dalam posting blog. Nah sebagai contoh, saya membuat sebuah blog tentang KPA Bestari yang memiliki label / kategori sebagai berikut : Berita, Pengumuman, Kegiatan, Dokumentasi dan Album. Setiap postingan yang berada dalam label tersebut diatas akan menampilkan ikon yang berbeda-beda. Contoh dapat dilihat pada gambar dibawah ini.

Nah mau tau cara membuatnya ? Untuk membuatnya kita harus memahami 2 tahapan :

Tahap 1 : Persiapan

1. Dilarang menyisipkan gambar pada paragraf pertama setiap postingan.
2. Dilarang menerapkan lebih dari 1 (satu) label untuk postingan.
3. Setiap postingan telah diberi Label.

Tahap 2 : Cara Membuatnya

1. Siapkan gambar / icon yang sesuai dengan label pada blog anda. Saya menggunakan gambar-gambar icon dibawah ini untuk label.
   
   Anda bisa mendownloadnya melalui www.iconfinder.com.
2. Login ke Blogger, lalu pilih DESIGN > EDIT HTML dan klik "Expand Widget Templates"
3. Lalu carilah kode dibawah ini, agar cepat gunakan CTRL + F :
   

   <div class='post-header-line-1'/> 

4. Kemudian paste-kan kode ini dibawah tag diatas :
   

   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.name == &quot;LABEL_ANDA_1&quot;'>
   <img align='right' src='http://alamat-ikon-anda'/>
   </b:if>
   <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.name == &quot;LABEL_ANDA_2&quot;'> <img align='right' src='http://alamat-ikon-anda'/>
   </b:if>



5. Ubahlah tulisan LABEL_ANDA_1, LABEL_ANDA_2 dengan label yang anda gunakan. Duplikat kode diatas sesuai dengan banyaknya label yang anda miliki.


6. Ubah alamat gambar anda pada kode src=’http://alamat-ikon-anda’ dengan alamat ikon yang anda miliki.


7. Langkah terakhir, simpanlah template anda.

Tweet