Ganti tulisan "read more" dengan gambar Ganti tulisan "read more" dengan gambar

Pasti kalian semua sudah tahu bagaimana caranya membuat “Read More”, atau “Baca Selengkapnya”. Di postingan kali ini saya akan mencoba untuk membahas bagaimana caranya mengganti tulisan “Read More” tersebut dengan gambar, Jadi, agar terlihat lebih bagus, daripada hanya tulisan biasa saja. Tapi, jangan lupa untuk mengupload gambar kamu ke image hosting Langsung saja, ini tutorial nya :

1.Saya anggap, blog shobat sudah terdapat fungsi read more.
2.Buka menu “Layout”, kemudian pilih “Edit HTML”
3.Cek (centang) pada cekbox "expand widget template"
4.cari kode seperti dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

5.Ganti tulisan yang berwarna merah dengan alamat gambar shobat, contohnya seperti ini

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>
<img src='http://3.bp.blogspot.com/_Qkv0T7MmW30/TNWEAB-RPYI/AAAAAAAAANA/bd7Ui0Fp_5I/s1600/Read-More-1.gif'/>
</a>
</b:if>

6.Save template
Selesai, dan lihat hasilnya. Sebenarnya, ada kelemahan mengganti tulisan “Read More” dengan gambar, yaitu loading template akan sedikit berbeda, karena harus “membaca” file gambar terlebih dahulu, berbeda pada saat menggunakan tulisan read more biasa.