Tampilkan Thumbnail Gambar Postingan Di Homepage Blog

Cara menampilkan Thumbnail Gambar yang di artikel yang anda buat pada Homepage Blog tidaklah sulit. Untuk melakukannya tidak memerlukan code <Script> hanya penambahan <Style> dan code html saja.

Dengan menambahkan Thumbnail akan membuat tampilan homepage blog anda menjadi lebih menarik sehingga pengunjung merasa penasaran dan melihat isi artikel tersebut. Penambahan code ini sangat berguna untuk beberapa blog yang mengandalkan thumbnail sebagai tampilan utamanya.

Cara Menambahkan Thumbnail Homepage Blog

Pertama, Login ke www.blogger.com

Kedua, Untuk menghindari terjadinya kesalahan dalam pemasangan, lakukanlah back up template.

Ketiga, Masuk ke menu Theme > Customize > Advance > Add CSS.

Keempat, Copykan kode berikut di Add CSS tadi atau bisa langsung simpan di atas kode }]]></b:skin>

.postthumb { 
 padding: 5px; 
 float:left; 
 border: 1px solid #eeeeee; 
 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); 
 } 

Kelima, Setelah menambahkan code style di atas selanjutnya tambahkanlah code berikut ini diatas  <data:post.body/> yang kedua,

<b:if cond=’data:blog.pageType == “index”‘> 
 <b:if cond=’data:post.thumbnailUrl’> 
 <img class=”postthumb” expr:src =”data:post.thumbnailUrl” expr:alt=”data:post.title”/> 
 </b:if> 
 </b:if> 

Keenam, Simpan Theme.

Jika ukuran gambar terlalu kecil gantilah kode yang ditandai warna merah dengan code expr:src='resizeImage(data:post.thumbnailUrl,350, &quot;100:35&quot;)'. Jika ingin lebih lengkapnya tentang resize thumbnail kunjungi www.codepelajar.com.

Semoga bermanfaat

Terimakasih telah berkunjung di https://www.agungpanduan.com

Jaringan dan Internet

Share This :