Mengganti Readmore dengan Gambar

Sebelumnya saya telah jelaskan pada postingan terdahulu bagaimana membuat read more atau baca selengkapnya pada blogger. Jika anda ingin membacanya kembali silakan klik link ini Cara Membuat Read More Blogger, karena pada postingan tersebut ada keterkaitan dengan postingan yang akan saya sajikan kali ini. Baiklah, jika kita lihat biasanya di penghujung pemotongan artikel suatu blog dapat anda temukan link yang bertuliskan read more atau baca selengkapnya. Sebagai contoh coba anda lihat link read more pada blog saya yang ini. Pada blog tersebut ada link yang bertuliskan baca selengkapnya, tapi di sampingnya juga terdapat sebuah gambar icon read more. Saya akan jelaskan saja cara mengganti tulisan link read more dengan gambar dan untuk selanjutnya terserah anda, apakah tulisan read more benar-benar mau diganti atau hanya ditambahkan gambar icon di samping tulisan tersebut. 

Berikut penjelasan singkat untuk mengganti link read more dengan gambar atau icon pada blogger:

1. Seperti biasa Log in terlebih dahulu ke account blogger anda, kemudian pilih menu Design >Edit HTML, jangan lupa untuk centang Expand Widget Templates dan temukan kode yang ditandai di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

2. Bagaimana? Sudah dapat? Ganti tulisan Read More... dengan kode ini:

<img border="0" src="http://urlgambarreadmorebloggeranda.com"/ >

Atau ganti tulisan yang ditandai berwarna merah di atas dengan url gambar read more anda. Anda juga dapat gunakan gambar yang telah saya sediakan berikut, silakan dipilih salah satu:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7bldY9jcgimhBmKMxGbBojRisoa4NSgjKmV8-3qaqJWUNf_KPBIa4hjmUbg2sR0oonv_VMN4N12c0J5r3s-tTI3EI-n7QOH05mMHnY84gt26MjBDsmpPKFKaQWq5q6rZDJz6cpqqMSM/s1600/readmore.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglrZHtxeC1-xPLZAUo2nc8h6aBIfy-dCUXnxvnA-RIXIit54D7LMdKTReJ1NIswIuKmfwlpm5cmpVCPwv0dYeNu-yVfLbtecWfUsNIqq-LCpYb04Me8uOfR6SAddp7yurjZSSnUoaIfI/s1600/more+button.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeSt-nwO2ZysxXGkbhraO0VnBWH4LLSuO64XhzwgZ8I6Ikj5AlSiQEc99lMtoL00giwijevvAK3daYHngqlxX-eqDEo-U-6JFECMvBRhUzjdZ1ayxlTPLF9JBfUceJDdIhNhqQS_mkw5I/s1600/readmore.png"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6DVZweKNqGBfn0YbHKwD8SMQ1-vw3hDHcuX6QzJtJH0gtET5_jfuOekEj9E8plr2DMTa85gM6CmLWgJHc3uxbEt5bwwkpLbM6zL8iK4cwqpF61o9f_FPu7HXfN_X53y518LiJrilAX8/s1600/read+more+arrow.png"/ >

3. Langkah akhir tinggal klik Save Template dan lihat hasilnya.