cara membuat tulisan readmore dengan gambar

MEMBUAT TULISAN READ MORE PADA POSTINGAN BLOG DENGAN GAMBAR



Pada tutorial kali ini, saya akan membuat bagaimana caranya kita membuat tulisan read more pada blog kita, tulisan read more ini biasanya tampil pada halaman depan blog kita, dimana hanya ada ringkasan mengenai isi posting kita, dan dengan menekan readmore, kita akan di bawa ke isi posting secara keseluruhan.


Fungsi dari readmore yaitu untuk memperpendek posting pada home page anda.

Kali ini ada trik yang baru yaitu membuat readmore yang beserta gambar. Setiap postingan anda akan muncul gambar walaupun anda menaruh gambarnya dibagian bawah posting. Secara otomatis apabila anda memposting maka gambar akan nampak pada home page.


Mau tau cara buatnya,,,ikuti aja langkah berikut
1. Login ke blogger
2. Pilih Tata letak dan klik edit HTML
3. Klik Expand Widget Template
4. Cari kode ini <data:post.body/>
5. Kopi kode ini dan paste dibawah kode diatas:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://ankitbajaj151.googlepages.com/readmore.js' type='text/javascript'/>
<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'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



4. Terakhir adalah simpan template anda...

Keterangan:
summary_noimg = 430; adalah potingan posting tanpa gambar
summary_img = 340; adalah potongan posting dengan gambar
img_thumb_height = 100; adalah tinggi gambar
img_thumb_width = 120; adalah lebar gambar