Mengganti Read More Dengan Icon di Blog

Temen-temen semua pasti sudah mengenal readmore bukan? Hampir semua yang punya blog pasti taulah dengan kata "read more". Biasanya secara default kata-kata read more di blog akan disetting sesuai template yang dipakai, misalnya  continue reading… , read more… ,  baca selanjutnya… , dan sebagainya.  Meskipun blogger telah menambahkan fitur read more ini, namun tetap saja masih ada yang ingin me-modifikasi read more agar pas dan sesuai dengan selera hati. Saya pernah menuliskannya di cara membuat read more 1 dan membuat read more versi 2 . Sekarang akan saya lengkapi dengan modifikasi read more yang lain. Apa saja itu?

Berhubung karena read more telah disediakan blogger maka anda dapat melihat kode read more seperti di bawah ini:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

Inilah kode dasar yang akan dimodifikasi untuk tampilan "read more" yang lebih dinamis. Ok, mari bergerak menuju blog anda .

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Centang kotak kecil di samping tulisan " Expand Template Widget "
5. Cari kode seperti ini :

   <div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

6. Ganti kode di atas dengan beberapa pilihan modifikasi "read more" yang saya uraikan di bawah ini atau dengan "read more" kreasi anda.
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Berikut adalah beberapa modifikasi "Read more" yang bisa menjadi pilihan anda. Seperti yang saya katakan di atas, anda pun bisa membuat kreasi "read more" sendiri. Ga apa-apa koq mencoba dikit-dikit. Jangan takut salah karena semuanya masih bisa diperbaiki.

Read More berada di sebelah kanan
Secara default biasanya read more akan berada di sebelah kiri. Nah, kita bisa membuatnya berada di sebelah kanan dengan menambahkan kode berikut :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>

</div>
</div>
</b:if>

Pilihan lainnya adalah dengan memasang kode CSS berikut di atas ]]></b:skin>

.readmore { float:right;padding: 10px 0px 5px 0px; }

Lalu pada pada bagian "body" pasang kode berikut

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</div>
</b:if>

Read more tampil dengan huruf tebal
Agar "Read more »»" atau "Read more..." bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more »»</strong> atau <b>Read more...</b>. Contoh :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>

<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>

</div>
</b:if>

Read more digantikan dengan icon
Mungkin anda merasa tampilan read more dengan huruf kurang menarik. Nah, pilihan lainnya adalah anda bisa mengganti tulisan read more dengan banner. Misalnya seperti di bawah ini:

Untuk menggantinya, maka kode CSS yang perlu diperhatikan seperti berikut

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src='URLgambarAnda' alt='read more dengan icon'/&gt;</a>
</div>
</b:if>

Sesuaikan dengan alamat penyimpanan gambar anda. Contohnya seperti ini :

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9idb4q0ues1r330o2pl7HMZB2W4RCErq5llrSTRoXZtW8eIsvyiqTReObLeEAi8Zl6rNABqeEAoekMOBYmCGU_74ndo1nr87TQcjnUrZmVlAiBboiog8Ml_btoCeFdBGu4PeI2sW1i00/s1600/readmore+button.png' alt='read more'/></a>

</div>
</b:if>

Mudah bukan, temen-temen bisa mengganti icon readmore sesuai keinginan. JIka masih kesulitan anda bisa tanya ke kotak komentar yang ada di bawah. Selamat berkreasi dan semoga berhasil.