Cara Membuat Auto Readmore Thumbnail Tanpa Javascript Di Blog 

Seperti yang sudah saya katakan di post sebelumnya, Auto Readmore merupakan suatu tambahan untuk blog yakni untuk memotong kalimat artikel di bagian home page blog, dan dengan thumbnail yang berada di bagian kanan, tentunya juga di sertai dengan tulisan " Read More " untuk membaca artikel selengkapnya.

Post kali ini adalah pelengkap post berikutnya, yakni masih berkaitan dengan fiture Auto Readmore, tapi kali ini adalah auto readmore versi tanpa javascript, katanya yang versi tanpa javascript lebih ringan dan tidak membuat loading blog menjadi berat.

Langkah pertama silahkan menuju dashboard blogger > Template > Edit HTML
Selanjutnya cari kode <data:post.body/> yang ke 2 atau 3 atau ke 4, lalu ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC9mteo0jeav9V2009KSc28gqF_9UH3iTWklrYI9DoB04gN2w-KP5sIapbyEqMxPUVeb34HIjy_lvNR5zbSUvq2L75AsbeMxOR8HFnNdNd9ARYgZsV0w2DFrL3hxZUIm3DetizWFvVFeB5/s1600/no-thumbnail.png'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
  </b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>

Keterangan :
Yang berwarna merah adalah gambar pengganti di bagian homepage jika di artikel tidak ada gambar

Selanjutnya adalah dengan menambahkan CSS untuk penyempurnaan tampilan Thumbnailnya, silahkan letakkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}

Langkah terakhir klik Simpan Template sobat. Semoga Bermanfaat. :)

 Salam ./Kum4n

Source : http://www.businessadexchange.com