Merubah Read More Dengan Icon Image

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.

Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: th_readmore atau seperti ini:

     atau seperti ini kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :

http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif

Tambahkan kode agar image tersebut dapat ditampilakn seoperti dibawah ini :

<img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/>

Image akan terlihat seperti ini gambar kedua diatas, tentu kreasi imagenya anda bisa sesuaikan sdengan selera anda (ini hanya contoh).

Selanjutnya ikuti tutorial berikut:

    * Seperti biasa anda harus dalam keadaan sig ini pada blogger
    * Masuk menu Tata Letak/ Layout=>klik Edit HTML=>Centang kotak kecil disamping Expand Template Widget
    * Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!
    * Kemudian cari kode seperti ini:

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>

    * Gantilah kalimat Read More dengan URL image yang telah disiapkan diatas, sehingga menjadi seperti ini :

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong><img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/></strong></a>
</b:if>

    * Terakhir, save template anda! Lihat hasilnya!

Semoga bermanfaat!