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:
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:
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>
<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>
Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini:
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:
<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 :
<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!
0 komentar:
Posting Komentar