Post Thumbnail dan Snippet Blogger

Sistem Post Thumbnail dan Snippet Blogger yang Dinamis dan Cara Memasangnya

Ada cara baru untuk memasang Post Thumbnail dan Snippet Blogger yang lebih dinamis dan ringan untuk membuat auto readmore. External Javascript untuk membuat auto readmore pada template Blogspot dipastikan akan memberatkan loading blog. Hal ini karena akan menyebabkan terlalu banyak inline javascript yang terpasang pada template. Yang tentunya dapat menghambat dan memperlambat laju proses tampilnya halaman blog pada browser. :D

Gambar Logo Blogspot

Dahulu, banyak pengguna Blogspot yang menggunakan default thumbnail dan snippet untuk membuat auto readmore. Penggunaan default thumbnail dan snippet tentunya agar loading blog menjadi cepat.

Default Thumbnail Blogspot

    <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'> 
        <img expr:src='data:post.thumbnailUrl'/>
    </a>
    </b:if>

Default Snippet Blogspot

<data:post.snippet/>

Cara Baru Memasang Default Post Thumbnail dan Snippet Blogger

Saat ini sudah ada cara yang lebih baik untuk menggantikan default post thumbnail dan post snippet tersebut. Semenjak Blogger.com menerbitkan template baru dengan tampilan serta struktur yang diperbaharui. Sistem Conditional dan Tags dalam template menjadi lebih modern dan dinamis.

Untuk membuat auto readmore dengan struktur terbaru yang lebih baik, Default Thumbnail yang lama diganti dengan:

<!--:[ IMAGE THUMBNAIL ]:-->
<div class='item-thumbnail'>
   <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnailUrl'>
     <a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'>
       <img expr:src='resizeImage(data:post.thumbnailUrl, 128, "1:1")' width='128' height='128' expr:title='data:post.title' expr:alt='data:post.title' itemprop='image'/>
     </a>
   </b:if>
</div>
<!--:[ IMAGE THUMBNAIL ]:-->

Begitu juga dengan post snippet, gunakan versi baru, dengan jumlah karakter yang dapat disesuaikan lebih dari versi yang lama:

<!--:[ POST SNIPPET ]:-->
<div class='item-snippet'>
   <b:eval expr='(data:post.body snippet { length: 512, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>
</div>
<!--:[ POST SNIPPET ]:-->

Dengan menggunakan Post Thumbnail dan Snippet Blogger yang baru, dapat dipastikan setiap pengguna template akan lebih mudah lagi mendesain tampilan blognya dan pengunjung akan mendapatkan pengalaman dan kesan yang lebih menarik saat menjelajahi dan membaca konten blog. :-)