Kustomisasi gambar thumbnail blogger

Tujuan kustomisasi gambar pertama posting artikel blogger, selain dapat menambahkan gambar default untuk postingan tanpa gambar, juga demi kemudahan mengatur tata letak item postingan di halaman utama, halaman arsip dan halaman label blogger.

Misalkan layout postingan mau dibikin gambar di bagian atas judul, kemudian disusul tulisan dibawahnya, tinggal mengkustom css gambar thumbnail, judul postingan dan badan postingan/konten tulisan.

Untuk mengedit gambar postingan pertama blogger, pertama tama cari kode
1

  <b:if cond='da    a:pos    .firs    ImageUrl'>
      <me    a expr:con    en    ='da    a:pos    .firs    ImageUrl' i    emprop='image_url'/>
    </b:if>
    

Biasa nya di bawah kode
2

   <b:includable id='pos    ' var='pos    '>

Ganti kode nomor 1 dengan kode nomor 3 dibawah;
3

<b:if cond='da    a:blog.pageType != &quo    ;i    em&quo    ;'>
<div class='    humbimg'>
<b:if cond='da    a:pos    .firs    ImageUrl'>
<img class='img    humb' expr:al    ='da    a:pos    .    i    le' expr:src='da    a:pos    .firs    ImageUrl'/>
<b:else/>
  <img class='img    humb' expr:al    ='da    a:pos    .    i    le' src='URL GAMBAR DEFAULT UNTUK POSTINGAN TANPA GAMBAR'/>
</b:if>
</div>
</b:if>  
  

Untuk selanjutnya, gambar posting, judul posting dapat di atur dengan kode css;

.post-outer .thumbimg{}
.post-outer .imgthumb{}
h1.post title{}
.post-outer .post-body{}
   

Atau kalau di ilustrasikan, bagaimana thumbnail ini bisa di kustom demi layout, seperti gambar dibawah;

Ilustrasi

Tentang Author

St

Dikirim pada -27 Okt 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Share ke

Lainnya oleh Santuy :