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, yang tentunya gambar bertuliskan “Read More”, seperti pada blog ini. 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 kamu 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 kamu, 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGvTH87h3U0ZoUf1wbIM3cdH-QYLroljuuJwznMY-lRj9I8mWwwUagZLew7s9fxalO72kiT3lHV751hnif3hDZpuJuVUzqKqGW8HD1pVZ1ESW33hibtbw9oKPqS3YIUdjyEXNGb-WbS7Q-/s1600/readmore.png'/>
</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.