Mengganti Read More Dengan Banner

Read more, siapa sih yang ga kenal dengan dia. Hampir semua yang punya blog pasti taulah dengan kata "read more". 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. Nah, saya pernah menuliskannya di cara membuat read more tanpa judul posting dan membuat readmore dengan judul posting. Sekarang akan saya lengkapi dengan modifikasi read more yang lain. Apa saja itu?

Nah, 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 banner
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 banner'/&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='http://i33.tinypic.com/6qz1mx.jpg' alt='read more'/></a>
</div>
</b:if>

Bagaimana, masih pusing membuat "read more" atau anda punya kreasi "read more" yang lain. Mari bantu saya bertukar pendapat di sini. Terima kasih..

Related Post:

Widgets

• Pasang Widget Top Commenters Di Blogger
• Pasang Widget Top Posts Di Blogger
• Pasang Widget Kode Warna Pada Blogger
• User Online Widget Whos Amung Us
• Related Posts With Thumbnails Dari Aneesh
• Related Posts With Thumbnail Dari LinkWithin
• Membuat Related Posts Fungsi Scrolling
• Pasang Widget Recent Comments Blogger
• Pasang Widget Recent Post Blogger
• Membuat Tab View Widget Blogger
• Membuat Kotak Pencarian Di Blogger
• Label Cloud Fitur Terbaru Blogger
• Membuat Label Cloud Blogumus Blogger
• Membuat Form Berlangganan FeedBurner
• Read More Dengan Judul Posting
• Cara Membuat Read More Blog
• Membuat Related Post Blogger

or or