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.

Cara Menampilkan Ikon dalam postingan pada Label Tertentu

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.