Membuat Auto Read More dengan Image (Gambar) Thumbnails

Setelah sebelumnya saya sudah pernah membahas tentang cara membuat read more di blogspot, sekarang saya ingin memaparkan bagaimana cara membuat read more dengan image thumbnails. Yang mana read more ini berfungsi untuk mempercantik desain blog anda dan juga bisa menampilkan jumlah karakter tulisan yang ingin di munculkan di halaman depan blog anda.

Adapun cara memasang readmore dengan image thumbnails adalah sebagai berikut:

• Apabila anda sudah pernah memasang read more versi lama di blog seperti cara sebelumnya (read more versi lama) silahkan saja anda hapus kode dibawah ini (sebelumnya anda harus berada di Edit HTML dan jangan lupa mencentang Expand Template Widget).
  

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> Read More...</a> </b:if>

• Setelah anda menghapus kode di atas, cari kode berikut <data:post.body/> atau <p><data:post.body/></p> kemudian timpa kode diatas dengan kode dibawah ini. 

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 110;
img_thumb_width = 110;
</script>
<script src='http://tutorhackblog.googlecode.com/files/summarypost.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUyVxBvxndRzrSj_8r-lT-zuSX6FXuzQ1A_wqyzmbATDGimEZ86knIWC4QHZMcZv17aV4kiUOlxihE-yvwnZTKJULtAgHo2GhEVLKM8chmZE46XN0XIb6Hy7n59jqjejSDXy9i9S_4ZMW/s1600/rmlink.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Kemudian simpan dan lihat hasilnya.

Ket:
summary_noimg = 430; = menentukan jumlah karakter ketika saat memposting tidak menampilkan image.
summary_img = 340; = menentukan jumlah karakter ketika saat memposting menampilkan image.
img_thumb_height = 110; =  menentukan tinggi image.
img_thumb_width = 110; = menentukan lebar image.
float:right = menentukan posisi read more (kanan atau kiri)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUyVxBvxndRzrSj_8r-lT-zuSX6FXuzQ1A_wqyzmbATDGimEZ86knIWC4QHZMcZv17aV4kiUOlxihE-yvwnZTKJULtAgHo2GhEVLKM8chmZE46XN0XIb6Hy7n59jqjejSDXy9i9S_4ZMW/s1600/rmlink.png = bisa anda ganti dengan image read more gambar anda sendiri.

Selamat mencoba.

Baca juga Artikel lainnya :