Thumbnail Post Berwarna Berdasarkan Label

:selamat Selamat pagi sob.. Salam sejahtera :shakehand semoga diberi kelancaran dalam menjalankan ibadah puasa khususnya hari ini.
Bukan cuma itu yang ingin saya sampaikan, mungkin sebelumnya sobat pernah membaca artikel yang sama, dan ingin sobat terapkan di template sobat yang sekarang pakai. Tapi kendalanya, mungkin sobat masih kebingungan.
Saya mencoba memberikan cara singkatnya, cara yang saya pakai ini diambil dari beberapa referensi yang menurut saya mudah untuk dipahami.
Oke langsung aja :

Caranya:

1. Carilah tag pembungkus dari area postingan sobat, sebagai contoh lihat gambar:

Untuk tag pembungkus postingan di template yang saya pakai, yaitu: <div class='kotaknyabro'> tag tersebut merupakan area untuk kita jadikan warna-warni.
2. Ubahlah tag pembungkus tersebut dengan kode ini:

&lt;div class=&#39;kotaknyabro <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop></b:if>&#39;&gt;

3. Scroll kebawah dan lihat ada kode </div> berwarna merah yang menandakan error, karena tidak sesuai dengan tag pembungkus diatas karena sudah diparse kan, kita rubah kode tersebut menjadi seperti ini &lt;/div&gt;
4. Untuk tahap selanjutnya, kita hanya perlu menambahkan kode CSS untuk mewarnai setiap label dalam postingan, sebagai contoh:

.kotaknyabro.CSS {
background: none repeat scroll 0% 0% #FF6C60; 
}

Maksudnya: .kotaknyabro merupakan class thumbnail post yang tadi kita escape untuk memunculkan nama label. .CSS = nama label di setiap postingan. #FF6C60 = warna untuk setiap thumbnail nya. Sekarang sobat hanya perlu menyesuaikannya.

Demikian tutorial Thumbnail Post Berwarna Berdasarkan Label saya buat, mudah-mudahan berkah untuk kita semua. Apabila ada pertanyaan, silahkan berkomentar :)

Source: BSCComunitas2 & Blog Dian Anarchyta