Cara Membuat Readmore dengan Gambar

Kita sebelumnya telah belajar fungsi dari readmore yang mana adalah untuk memperpendek posting pada home page anda. Kali ini ada trik yang ingin saya bagikan yaitu mengubah teks readmore dengan gambar. Secara otomatis apabila anda memposting maka gambar readmore akan nampak pada home page. Jika sobat ingin tau caranya ikuti langkahnya berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Template Widget
4. Cari kode ini </head>
5. Kopi kode dibawah ini dan paste dibawah kode diatas:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://jurus2ngeblog-blogspot.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan :
summary_noimg = 430; adalah jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 340; adalah jumlah karakter yang akan ditampilkan dengan gambar
img_thumb_height = 100; adalah ukuran tinggi gambar
img_thumb_width = 120; adalah lebar gambar

6. Carilah kode <data:post.body/>
7. Hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:
Kode berwarna merah diatas adalah gambar atau teks yang ingin ditampilkan pada readmore. Untuk contoh gambar sobat dapat lihat dibawah ini:

http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg
http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif
http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png
http://1.bp.blogspot.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif%27

8. Simpan template sobat

Posted in: Gambar