Cara Praktis Membuat Thumbnail Post Warna-Warni Sesuai Label Post - Halo sobat, kali ini aku akan memperlihatkan Trik bagaimana Cara gampang menbuat thumbnail post berwarna-warni sesuai dengan label post sobat.
Sebenarnya gampang saja untuk membuatnya, teman tidak perlu menggunakan/menambahkan script atau jquery yang menimbulkan blog bertambah berat.
Lalu bagaimana cara membuatnya ?, berikut Triknya :
1. Pertama-tama Sobat harus mencari arahan pembungkus dari thumbnail post teman dengan cara Klik Kanan Pada Thumbnail Post -> Inspect Element , Dibawah ini memperlihatkan bahwa arahan pembungkus template aku yaitu .thumbnail
2. Masuk Template, Cari arahan berikut <div class='thumbnail'> , biasanya arahan tersebut lebih dari satu, maka teman pilih arahan pertama yang teman temukan, ganti kata thumbnail dengan arahan pembungkus sobat.
3. Ganti arahan tersebut dengan arahan dibawah ini :
Ganti thumbnail dengan arahan pembungkus post sobat.
4. Setelah itu scroll sedikit kebawah, maka teman akan menemukan arahan </div> yang berwarna merah yang berarti memperlihatkan error pada kode, ganti arahan </div> yang berwarna merah tadi dengan arahan berikut :
5. Terakhir, teman hanya perlu menambahkan arahan css berikut :
Terima kasih telah berkunjung, mari berkomentar dan Happy Blogging, Wassalam.
Sebenarnya gampang saja untuk membuatnya, teman tidak perlu menggunakan/menambahkan script atau jquery yang menimbulkan blog bertambah berat.
Baca juga : Cara Membuat Artikel SEO
Lalu bagaimana cara membuatnya ?, berikut Triknya :
1. Pertama-tama Sobat harus mencari arahan pembungkus dari thumbnail post teman dengan cara Klik Kanan Pada Thumbnail Post -> Inspect Element , Dibawah ini memperlihatkan bahwa arahan pembungkus template aku yaitu .thumbnail
 |
| Ilustrasi Element Pembungkus Post |
2. Masuk Template, Cari arahan berikut <div class='thumbnail'> , biasanya arahan tersebut lebih dari satu, maka teman pilih arahan pertama yang teman temukan, ganti kata thumbnail dengan arahan pembungkus sobat.
3. Ganti arahan tersebut dengan arahan 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 arahan pembungkus post sobat.
4. Setelah itu scroll sedikit kebawah, maka teman akan menemukan arahan </div> yang berwarna merah yang berarti memperlihatkan error pada kode, ganti arahan </div> yang berwarna merah tadi dengan arahan berikut :
</div>5. Terakhir, teman hanya perlu menambahkan arahan css berikut :
.thumbnail.Templates {background: none repeat scroll 0% 0% #277FBF; }Perhatikan :
Ganti arahan .thumbnail dengan arahan pembungkus post sobat.
Ganti arahan .Templates dengan nama Label post sobat.
Ganti arahan #277FBF dengan arahan warna yang teman suka.
Terima kasih telah berkunjung, mari berkomentar dan Happy Blogging, Wassalam.
