Tutorial Percantik Blog | Cara Membuat Readmore Otomatis

Selamat siang sobat blogger. Jumpa lagi dengan saya “DavidSio” di postingan lanjutan saya. Hari ini saya akan bahas tentang bagaimana sobat membuat read more di blog. Nah, tarik napasnya dalam-dalam, perhatikan tutorialnya.
Langsung saja yah sobat : ^_^

1. Masuk di Blogger, klik anak panah hitam disamping button lihat blog, pilih Template. Lihat gambar dibawah :

Setelah itu akan muncul tampilan seperti di bawah ini, pilih Edit HTML. Lihat gambar dibawah:

Ehhhh, muncul gambar lagi. Pilih Lanjutkan. Lihat gambar berikut :

2. Kemudian, setelah sobat klik Lanjutkan, akan muncul gambar berikut, Centang Expand Template Widget. Lihat gambar berikut :

3. Cari kode </head> Supaya cepat tekan keyboard  Ctrl  F  dan tuliskan </head>,
4. Setelah dapat kodenya, Masukkan kode dibawah ini, tepat dibawah </head>.

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

5. Kemudian cari lagi kode <data:post.body/> , seperti biasa ketik dikolom Find untuk mencari kode tersebut. Lihat gambar dibawah jika sobat kebingungan :

6. Ganti <data:post.body/> 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'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Nah sekarang lihat keterangan dibawah ini biar sobat lebih mengerti.

Keterangan :
READ MORE               : bisa diganti sesuai selera
summary_noimg = 430   ; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera
summary_img = 340       ; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera
img_thumb_height = 100 ; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera
img_thumb_width = 120 ; adalah ukuran lebar thumbnail, bisa diganti sesuai selera

Setelah semua langkah sudah sobat ikuti, di bagian bawah, pilih button Pratinjau untuk melihat hasil sementaranya. Lihat gambar berikut :

Jika sobat setuju dengan hasil editnya, pilih button Save Template / Simpan Tempelate untuk hasil yang diingini.

Selamat mencoba, semoga bermanfaat n’ GBU always…