AGUNG TUTORIAL

Belajar Bordir Wilcom dan Tajima Mesin SWF, VBA Macro Excel, Design Grafis CorelDraws, Video Editing, Download Software-software, Solusi Masalah Error Komputer, Jaringan dan Internet, Analisis Jaringan, Analisis Problem Hardware dan sebagainya

11/20/2018

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.
KetigaMasuk 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

7 komentar:

  1. Kegunaannya apa ya bro?
    Maaf saya masih pemula
     https://heffrihutapea.blogspot.com

    Heffri Hutapea

    BalasHapus
    Balasan
    1. buat blog yang ingin tampilkan thumbnail gambar yang diposting

      Hapus
  2. Sangat berguna bagi yang ada masalah Thumbnail blog engga muncul

    Jangan lupaa berkunjung untuk mempelajari bahasa program dengan mudah
    https://kamuscode.blogspot.com

    BalasHapus
  3. Mantap Tutorialnya.. Sangat bermanfaat untuk blogger pemula kek saya

    kunjungi
    https://a-pastel-story.blogspot.com/

    BalasHapus
  4. Exsdee gk nongol di post body ke dua nih

    BalasHapus
  5. Waaah boleh juga nih.. Auto praktekin gan.. Makasih ilmunya.. Lagi2 bermanfaat.. Hehe

    BalasHapus