Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Senin, 10 Oktober 2016

Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post

Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post - Halo sobat, kali ini saya akan memberikan Trik bagaimana Cara mudah menbuat 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.

Cara Mudah Membuat Thumbnail Post Warna-Warni Sesuai Label Post

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
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 :

&lt;div class=&#39;thumbnail <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;

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 :

&lt;/div&gt;

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.

Terima kasih telah berkunjung, mari berkomentar dan Happy Blogging, Wassalam.




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP