MENGGANTI TULISAN READMORE DENGAN GAMBAR

Cara Mengganti Tulisan Readmore Blog Dengan Gambar, di sini saya Akah sharing cara Modifikasi Tulisan Readmore Blog deangan Gambar kita sendiri, caranya sangat mudah dan jangan lewati langkah-langkah yang di berikan Oleh Blogger Senior kita : Daw-XP, mengganti Readmore blog berguna untuk mempercantik Blog dan juga pengunjung tak segan-segan untuk mengeklik Tombol Readmore yang kita sudah ganti, langsung saja di bawah adalah Tutorial-tutorial Cara Memodifikasi/Mengganti Tulisan Readmore dengan Gambar.
di bawah adalah Kode Dasar untuk Readmore, setelah ketemu kita bisa berkreasi  :

<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>

Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.

Cara Readmore Berada Di Sebelah Kanan

Default ''Readmore" ada di sebelah Kiri, dan kita ingin Mengganti Tulisan Readmore di sebelah kanan, caranya sangat mudah, anda bisa tambahkan kode tambahan seperti di bawah ini :

<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>

Atau anda lebih suka dengan kode CSS, bisa seperti ini ;

Simpan ini di atas kode ]]></b:skin>

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

dan pasang ini di bagian body nya ;

<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>

 Agar Read more ditampilkan tebal

Agar tampilan "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>

 Agar Read more tampil plus Judul Posting

Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :

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

Agar Read more diganti dengan banner

Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :

Format kodenya seperti ini ;

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

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;'><img src='URLgambarmu' alt='read more'/></a>
</div>
</b:if>

Contoh nyata 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/AVvXsEjY4F-rw8cf0BK4GrpNsRBXmC6sgAX4PDOeXeI96hg-kSokEzYpZm-cyrquCDy5buP9vlNu0ocItAgQtOpODz_Ciq9fytsYh1xhJqAam2aYfbMpCwvRHTq02Y7mB6HqjYtgYU-ePMRwA5k/[1].png' alt='read more'/></a>

</div>

</b:if>

Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.

Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget " 
5. Carilah kode yang mirip seperti Ini :

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

6. Silahkan ganti kode di atas dengan hasil kreasimu..
7. Simpan Template