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. Langsung saja, ini tutorial nya :

1.Blog kamu harus sudah terdapat fungsi read more, kalo belum ada silahkan buat dulu, klik disini untuk membuatnya,
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/AVvXsEisvKbW9-qWOuDCgzof6uzyGvlBMsoMFjWAKZcz_2j2njxoBLKVrMVisyYwrpH9NVAeD65mPRujKT1xMKSJV6ox0Ua3meW6ATFanSUqfSZYNePlEfhIl4mBs-k9q79c9SmEAiscKtsZPjdg/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, tapi blog menjadi sedikit lebih keren, hehehe :)

Selamat mencoba deh.....