Membuat Readmore Dengan Gambar & Teks

Tutorial blogging kali ini yaitu Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, Sebenarnya ini adalah request dari temen saya yang kesulitan membuat Readmore, semoga dengan artikel ini dapat terbantu.  Pasti sudah tahu Readmore kan, nah jika blog kamu belum mempunyai readmore, alias artikelnya masih memanjang, nah untuk itu agar tampilanya lebih rapi sebaiknya kamu memasang Readmore di blog kamu, disini saya akan memberikan Tutorial Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, seperti judulnya dengan kode dibawah ini kamu bisa membuat Readmore yang menggunakan Icon Gambar atau hanya menggunakan Teks. 

1. Login ke Blog anda
2. Buka halaman design > Edit HTML > centang Expand template widget
3. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
     Paste kode berikut tepat dibawah </head>

<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://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

4. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  . Jika menemukan 2 kode yang sama, pilih kode yang pertama.

5. Jika sudah ketemu silahkan anda ganti kode tersebut 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://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png"></img></a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6. Klik Pratinjau, jika sudah berhasil silahkan klik SIMPAN

Keterangan :

pada kode diatas terdapat beberapa kode yang bisa kamu ubah sesuai keinginan kamu, ini dia.
summary_noimg = 430; angka 430 adalah jumlah karakter yang akan ditampilkan jika tidak menggunakan gambar.
summary_img = 340; jika menggunakan gambar, angka 340 adalah jumlah karakter yang akan ditampilkan.
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul.
img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail.

Kamu  juga bisa mengubah Icon read more  


http://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png

(klik disini untuk download Iconya)

BACA JUGA YANG INI :