Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post
- Halo sobat, kali ini saya akan memberikan Trik bagaimana Cara mudah
membuat thumbnail post berwarna-warni sesuai dengan label post sobat.
Sebenarnya mudah saja untuk membuatnya, sobat tidak perlu menggunakan/menambahkan script atau jquery yang mengakibatkan blog bertambah berat.
Lalu bagaimana cara membuatnya ?, berikut Triknya :
1. Pertama-tama Sobat harus mencari kode pembungkus dari thumbnail post sobat dengan cara Klik Kanan Pada Thumbnail Post -> Inspect Element , Dibawah ini menunjukkan bahwa kode pembungkus template saya adalah .thumbnail
 |
| Ilustrasi Element Pembungkus Post |
2. Masuk Template, Cari kode berikut <div class='thumbnail'> , biasanya kode tersebut lebih dari satu, maka sobat pilih kode pertama yang sobat temukan, ganti kata thumbnail dengan kode pembungkus sobat.
3. Ganti kode tersebut dengan kode dibawah ini :
<div class='thumbnail <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><data:label.name/></b:if></b:loop></b:if>'>
Ganti thumbnail dengan kode pembungkus post sobat.
4. Setelah itu scroll sedikit kebawah, maka sobat akan menemukan kode </div> yang berwarna merah yang berarti menunjukkan error pada kode, ganti kode </div> yang berwarna merah tadi dengan kode berikut :
</div>
5. Terakhir, sobat hanya perlu menambahkan kode css berikut :
.thumbnail.Templates {background: none repeat scroll 0% 0% #277FBF; }
Perhatikan :
Ganti kode .thumbnail dengan kode pembungkus post sobat.
Ganti kode .Templates dengan nama Label post sobat.
Ganti kode #277FBF dengan kode warna yang sobat suka.
