Cara Membuat Readmore Otomatis Menggunkan Gambar Atau Teks

Hai sobat semua kali ini blog ini akan membahas tentang Cara Membuat Readmore Otomatis Menggunkan Gambar Atau Teks, kalo biasanya menggunakan teks saja atau gambar saja maka kali ini blog ini akan lansung memberikan keduanya, jadi terserah sobat mau menggunakn readmore dengan icon gambar atau dengan teks.

Oke dah lansung aja kita bahas caranya:

1.Pertama-tama sobat harus login ke blogger sobat.
2.Pada tab menu pilih Rancangn - Edit HTML.
3.Selanjutnya cari kode </head> jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.
4.Jika kode </head> sudah ketemu selanjutnya copy kode berikut dan paste atau letakkan di atas kode </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://otowebsite.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

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

6.Jika sudah ketemu selanjutnya silahkan sobat ganti kode tersebut dengan kode berikut:

<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://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7.Klick pertinjauan lebih dahulu, jika sudah berhasil baru klick simpan.

Keterangan :
pada kode diatas terdapat beberapa kode yang bisa sobat ubah sesuai keinginan sobat, diantaranya:
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.

Sobat juga bisa mengubah Icon read more

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png

Silahkan sobat ganti dengan icon readmore lainnya atau dengan teks seperti:

Read more>>, atau Baca Selengkapnya>>

Maka sobat tinggal menghapus / mengganti kode <img src="http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Disini saya juga menyediakan icon readmore untuk mempermudah sobat,  jika sobat berminat silahkan sobat download, contohnya seperti gambar.
Jika berminat sobat bisa downlod disini.





Cukup sekian dulu untuk kali ini semoga postingan/articles ini bisa bermanfaat untuk sobat semuanya.

Bagaimana tanggapan sobat tentang postingan/articles di atas? silahkan tinggalkan komentar/tanggapan sobat!