Cara Praktis Ganti Kata Read More dengan Gambar

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 dengan gambar dan untuk selanjutnya terserah anda, apakah tulisan readmore 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/AVvXsEi2nXkvaReAgI4xgL_wXebH850VwHtsSRcAH27wCPJMhODJjhQvatyqrk4kDFayAmNbjXoBQ9GalscP9YTzaC5BA2i4SCblZ1_Lra745U-8JFoPMVbjOZofpxrhv9CY6WlY01_KWIt6mYU/s1600/readmore.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxvGdPTe_ZwZ4KHpCJauzMNY2iZBgPBQvv_f9G5FFYPFv3_CUulLaZwwLi-_n91bT5PHPMvpLitfe1kJRCkHrVBtAuRBx6-LykNW4xwg2PbFwkXChWKAYg1lck0fh0-DL-7eqYfzyrYw/s1600/more+button.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8UoMYRaZyrFVzkVhn3JikFqH43e0CjiZA7CvK52ZRkCs5wuRLrTmXM__IBr7weNN7M7x-dtslG0Z3kzb4lWF8CgQ5ptXgvh7s3d_i_uEJ-rHhBqPZenXTO44dLa3rcYtcWd8H_albYNQ/s1600/readmore.png"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYrKj85ucOQinLeLpLy-sjtqTYXB7k6JHJJmI10Ck37iDciCS43sx7adY-4mSTPdgHkV3SIlwJayqtFPYa9e0jPswxo4MYH5VpigHQUrbiSaYuYeJBDagHg_rfCtKSoW9yZZoe6IEI624/s1600/read+more+arrow.png"/ >

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

• Demo

Tweet

Ditulis Oleh: wisata pisak at 2:33 PM