Harapan Putra - Setelah pada postingan sebelumnya kita membahas Cara membuat
read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan anda, 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:
kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini : http://i1028.photobucket.com/albums/y341/ratnasyid/harapanputra%20backround/24-large-allblogtools.gif
Tambahkan kode agar image tersebut dapat ditampilakn seperti dibawah ini :
<img src="http://i1028.photobucket.com/albums/y341/ratnasyid/harapanputra%20backround/24-large-allblogtools.gif"/>
Image akan terlihat seperti ini gambar kedua diatas, tentu kreasi imagenya anda bisa sesuaikan dengan 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://i1028.photobucket.com/albums/y341/ratnasyid/harapanputra%20backround/24-large-allblogtools.gif"/></strong></a>
</b:if>
- Terakhir, save template anda! Lihat hasilnya!
Semoga bermanfaat!
Tulisan Terkait