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 menciptakan tampilan homepage blog anda menjadi lebih menarik sehingga pengunjung merasa ingin tau dan melihat isi artikel tersebut. Penambahan code ini sangat berkhasiat 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 hidangan Theme > Customize > Advance > Add CSS.

Keempat, Copykan isyarat berikut di Add CSS tadi atau dapat pribadi 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 isyarat yang ditandai warna merah dengan code expr:src='resizeImage(data:post.thumbnailUrl,350, &quot;100:35&quot;)'. Jika ingin lebih lengkapnya perihal resize thumbnail kunjungi www.codepelajar.com.

Semoga bermanfaat

Terimakasih telah berkunjung di https:/agungpanduan.blogspot.co.id

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.