Sabtu, 22 Januari 2011
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 + "#more"'><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 .
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 :
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik tab Edit HTML.
- Centang kotak kecil di samping tulisan " Expand Template Widget "
- Cari kode seperti ini :
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> - Ganti kode di atas dengan beberapa pilihan modifikasi "read more" yang saya uraikan di bawah ini atau dengan "read more" kreasi anda.
- Klik tombol SIMPAN TEMPLATE
- Selesai.
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'>Pilihan lainnya adalah dengan memasang kode CSS berikut di atas ]]></b:skin>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></div>
</div>
</b:if>
.readmore { float:right;padding: 10px 0px 5px 0px; }Lalu pada pada bagian "body" pasang kode berikut
<b:if cond='data:post.hasJumpLink'>Read more tampil dengan huruf tebal
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
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'>Read more digantikan dengan icon
<div class='jump-link'><strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong></div>
</b:if>
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'>Sesuaikan dengan alamat penyimpanan gambar anda. Contohnya seperti ini :
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='URLgambarAnda' alt='read more dengan icon'/></a>
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgOgdavN1ayAu0JJXTlmgQgdqehxQQ9pRMlJ0mqRSspSaL7WNK4sXuT-tLoyIACIzS1GvPed8tlFpOE0nHY_bRrStpdUvtevd4s2NiKZMs4k6N3pmzTDFzlGyTJm-dYDCS5Uy7rx1cRg/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.
Label:
tutorial blog