Membuat Read More Otomatis Dengan Gambar di Blog

Membuat Read More otomatis di Blog sangat mudah, tetapi sebelumnya anda harus mengetahui dulu fungsi daripada Read More itu sendiri.

Read More atau dalam bahasa Indonesia Baca Selengkapnya berfungsi untuk memotong suatu artikel atau postingan blog agar bisa terlihat lebih rapi, jadi pengunjung hanya akan melihat sebagian teks dan gambar artikel di area Home atau Beranda, dan apabila pengunjung berminat untuk membaca semua isi artikel maka pengunjung cukup meng-klick tanda Read More atau tanda Baca Selengkapnya

Halaman ini telah di update silahkan lihat DISINI

Nah sekarang kalau anda tertarik untuk membuatnya, berikut langkah-langkahnya :
1. Masuk ke akun Blogger
2. Pilih Rancangan
3. Pilih edit HTML
4. Lalu centang Expand template widget
5. Terus carilah kode </head>
6. Copy kode dibawah ini dan pastekan dibawah kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img =300; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

7. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>

8. Ganti kode diatas derngan kode berikut ini :

<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;padding-top:20px;'>
<a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicGwzdA5ouxXYstvEEOehwjj7UARX9QvNNYzokNI6_Rhoe1UXfhZMWRGhpT95zHu8Gk2nucmS9pC08sWRJK2VSWNnyfvffPNMuyKZdPJZRCtzN1DnKAEEH40jybDtgfdudN1cDPfphInWw/s1600/selengkapnya.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

9.Simpan template dan lihat hasilnya.

Catatan :

summary_noimg = 430; (jumlah huruf artikel tanpa gambar)
summary_img = 300;(jumlah huruf artikel bergambar)
img_thumb_height = 100;(Tinggi gambar)
img_thumb_width = 120; (Lebar gamnbar)
Ubahlah link ini dengan gambar anda sendiri https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicGwzdA5ouxXYstvEEOehwjj7UARX9QvNNYzokNI6_Rhoe1UXfhZMWRGhpT95zHu8Gk2nucmS9pC08sWRJK2VSWNnyfvffPNMuyKZdPJZRCtzN1DnKAEEH40jybDtgfdudN1cDPfphInWw/s1600/selengkapnya.jpg