Cara Membuat Auto Readmore dengan Thumbnail Tanpa Javascript di Blog

Auto Readmore adalah tulisan posting pada halaman depan yang terpotong, dan otomatis akan muncul link "baca selengkapnya". Pada auto readmore ini juga sudah otomatis dengan menampilkan cuplikan gambar (Thumbnail) pada halaman depan blog.

Dengan adanya Auto Readmore secara otomatis ini, maka akan memudahkan penulis tidak akan susah-susah untuk menggunakan auto readmore secara manual pada postingan. Tentu saja akan ribet jika posting sudah banyak tetapi lupa atau tidak menggunakan auto readmore (Insert jump break), jika tidak menggunakan auto readmore ini, pasti kalian sudah kelelahan untuk memasangkan insert jump break satu persatu pada posting blog.

Auto Readmore ini juga disertakan dengan Thumbnail (cuplikan gambar pada post) dan tanpa javascript, dan juga ini hanya menggunakan post-snippet yang ada pada widget popular post, jadi tentu saja tidak akan memperberat/pengaruh dengan loading blog.
Pada blog www.dandidesain.com yang template sekarang ini 2016 juga menggunakan auto readmore, perhatikan gambar ini, tulisan terpotong dan dikiri nya ada gambar cuplikan (thumbnail)

Tertarik untuk memasangkan auto readmore dengan thumbnail di blog sobat? silahkan simak cara-cara berikut dibawah ini.

Cara Pertama:
Yaitu template blog yang masih bersih alias belum menggunakan auto readmore dengan javascript sebelumnya

Login ke blogger.com -> Template -> Edit HTML
Tambahkan kode ini diatas kode ]]></b:skin>

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

Kemudian cari kode <data:post.body/>, biasanya kode ini terdapat 2 sampai 4 buah pada template blog, ganti kode <data:post.body/> yang ke 2 dengan kode dibawah ini, jika tidak berhasil, dicoba satu persatu.

<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='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></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>

Preview template, jika auto readmore sudah terlihat (baca selengkapnya) berarti sobat sudah berhasil, tinggal di Save template selesai.

Cara Kedua:
Yaitu template blog yang sudah memasang auto readmore tetapi dengan javascript.

Cari kode dibawah ini pada Template -> Edit HTML

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

(Jangan lupa untuk menghapus kode javascript auto readmore sebelumnya, biasanya ada di atas kode </head>)
Kemudian ganti kode tersebut dengan kode dibawah ini

<b:if cond="data:post.firstImageUrl">
  <a expr:href="data:post.url">
<img class="thumbnail-post" expr:src="data:post.firstImageUrl" expr:title="data:post.title" /></a>
<b:else>
  <a expr:href="data:post.url">
<img class="thumbnail-post" src="http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg" expr:title="data:post.title" /></a>
  </b:else>
</b:if>
<div class='post-snippet'>
  <data:post.snippet/>
</div>

Save template dan lihat hasilnya

Jika masih ada cara yang kurang jelas, silahkan ditanyakan melalui kotak komentar dibawah ini, semoga bermanfaat.