Readmore otomatis dan menampilkan gambar postingan

oleh aanbae

Setelah vilat lines pernah ngebahas pembuatan readmore pada blogger sebelumnya, yaitu readmore biasa ( yang memakai fungsi <div class="fullpost">..</div> atau <span class="fullpost">...</span> ketika akan memposting ), dan juga readmore yang mempunyai fungsi expand collapse dan tanpa reload page.

Nah kali ini kita akan sharing cara membuat readmore yang bisa menampilkan gambar di depan posting yang bisa kita edit ukurannya walau sebenarnya gambar tersebut tidak didepan postingan kita ( ditengah dan bawah ). Contoh disini
Catatan : Readmore ini tetap me-loading ulang

Cara membuatnya :

- Kita ke edit html
- Expand template widget
- Cari code <data:post.body/> di template sobat, dan jika sudah ketemu ganti kode tersebut dengan kode dibawah ini :

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://www.geocities.com/hans_anthonio/selengkapnya.js' type='text/javascript'/>
<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'><a expr:href='data:post.url'>Selengkapnya...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Jika sobat sudah terlanjur memakai readmore lama, biar ga ribet pasang saja script diatas diantara :

<div class='post-body entry-content'>

Pasang script diatas disini

<div style='clear: both;'/> <!-- clear for photos floats -->

Catatan lagi : hapus seluruh kode di template sobat ( yang ada diantara kode diatas )dan ganti dengan script diatas.

Atau template sobat belum memakai fasilitas readmore tapi yang ada hanya kode <p><data:post.body/></p> , maka kode inilah yang sobat ganti dengan script tadi.

Ket :

- Angka 430 adalah Karakter tulisan postingan yang ditampilkan jika tidak ada gambar dan 340 jika ada gambar.
- Angka 100 adalah tinggi gambar dan 120 adalah lebarnya, silahkan sobat edit sendiri ukurannya.
- Silahkan ganti tulisan warna merah tersebut dengan kata-kata sobat sendiri, misalnya readmore, selanjutnya, baca lengkap dll.

Klik pratinjau dan jika berhasil di save.

Salam blogger........