:Learning For Life:: Cara Pasang Read More Animasi

Sebelumnya saya telah posting Cara Mudah Membuat Read More di Blog. dan sekarang untuk melengkapi postingan tersebut akan saya bagikan bagaimana Cara Mudah Mudah Membuat Read More Lebih Menarik. Agar tampilan read more yang kita miliki lebih bervariasi yang tentunya sesui dengan yang kita inginkan.

Nantinya hasilnya akan tampak seperti gam bar di bawah ini, gambar ini adalah screenshot blog saya yang lain, langsung saya terapkan agar anda yakin dan tau seperti apa jadinya nantinya.

Cara membuatnya akan saya jelaskan berikut ini :
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Cari kode read more, selanjutnya, teruskan baca, atau apa saja seperti tampilan jump break (read more) artikel anda. Jika anda mengikuti tips Cara Mudah Membuat Read More di Blog Seperti yang sudah saya jelaskan sebelumnya, maka dapat terlihat seperti berikut :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kode yang berwarna biru itulah yang kita cari, selanjutnya Hapus kode tersebut dan ganti dengan kode di bawah ini.

Nantinya kodenya akan menjadi seperti berikut ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  <img align='right' alt='read more' margin='0' border='0' width='80' height='35' src='KODE GAMBAR'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :
Silahkan ganti KODE GAMBAR dengan kode gambar dibawah ini.
Silahkan anda edit width untuk ukuran lebar dan height ujtuk ukuran tinggi tampilan read more

KODE GAMBAR