Menampilkan Cuplikan Image Di Homepage Simple Blogger Template

Jika kalian pengguna simple blogger template, jelas..! cuplikan gambar tidaklah nampak jika dilihat di halaman beranda homepage.

Padahal halaman beranda punya fungsi yang sangat penting, yang memberikan kesan dan gambaran singkat yang mewakili dari keseluruhan halaman website kepada pengguna saat berkunjung di halaman beranda sebuah website.

Oleh karena itu, sebuah cuplikan gambar sangatlah penting ditempatkan di area homepage ini untuk mengundang para pembaca, pengguna membuka halaman atau file-file lain berikutnya.

Sifatnya yang fleksibel dalam menerima perubahan dan perkembangan dari web of development, membuat tema - template ini sangat diminati olrh para blogger. Namun demikian, secara default simple blogger template ini tidaklah disertai dengan cuplikan gambar (thumbnail).

Untuk itu, pada episode kali ini saya ingin berbagi tentang bagaimana cara menampilkan cuplikan gambar di beranda saat menggunakan simple blogger template. Begini caranya :

●  Letekkan css ini di atas </head> atau ]]></b:skin>   :

<style>

<b:if cond='data:blog.pageType != &quot;item&quot;'> 

<style type='text/css'>

.Image.firstImg{width:240px;height:auto;float:left;clear:left;border-radius:7px;margin:0 15px 0 0}

.post p{line-height:1.5;font-size:15px;}

.jump-link {padding:5px 1px;border-bottom:1px dashed #ddd;color:var(--bg-link);font-weight:bold;font-style:normal;text-transform:normal;margin-bottom:15px}

.post-footer{display:none;line-height:1.4;margin:-10px 0 10px -8px}

  

@media screen and (max-width:768px){

.Image.firstImg{width:150px;height:auto;margin-bottom:0px}  

h2.post-title{font-size:18px;margin-bottom:-10px}

}

  </style>

●  Cari script <data:post.body/> yang kedua lalau letakkan berikut ini, tepat di atasmya.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

        <b:if cond='data:post.firstImageUrl'>

              <div class='Image firstImg'>

                <img alt='nama blog kamu' expr:src='data:post.firstImageUrl'/>

              </div>

          </b:if>

      <b:else/>

</b:if>

●  Lihat hasilya dengan cara buka homepage

●  Done!

    

Selamat mencoba... mohon bagikan kepada rekan-rekan melalui sosial media anda, and GOODLUCK!