Cara Membuat Read More Otomatis

Walaupun sekarang blogspot sudah menyediakan tombol  read more manual atau Insert Jump Break tapi  rasanya kurang mengasikan karena setiap membuat postingan harus menekan tombol tersebut. Terasa lebih asik jika menggunakan yang otomatis.

Dengan membuat readmore otomatis ini,  maka akan langsung teraplikasi ke seluruh posting yang sudah dibuat, bahkan secara otomatis pula memunculkan gambar yang ada dalam postingan tersebut. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung mengklik Read more barulah pengunjung bisa membaca artikel secara utuh.

Bagi yang belum memasangnya dan ingin menerapkannya mari kita ikuti langkah-langkahnya :

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

<!-- Auto read more script Start -->

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar

summary_noimg = 280;

summary_img = 250;

img_thumb_height = 70;

img_thumb_width = 70;

</script>

<script src='http://djangkarubumi.googlecode.com/files/serpihanwaktureadmorev2.js'/>

<!-- Auto read more script End -->

6. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasa gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama. Jika sudah ketemu silahkan Sobat ganti kode tersebut dengan kode dibawah ini

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

<data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more »»» </a>
</b:if>
</b:if>
<!-- Auto read more  End -->

7. Klik simpan template dan lihat hasilnya

NB :

• summary_noimg = 280; apabila artikel Sobat tanpa gambar maka yang akan tampil pada halaman depan adalah 280 huruf
• summary_img = 250; apabila artikel Sobat berisi gambar maka yang akan tampil pada halaman depan adalah 250 huruf dan gambar
• img_thumb_height = 70; ini adalah ukuran tinggi gambar yang akan muncul di halaman depan
• img_thumb_width = 70; sedangkan yang ini adalah lebar gambar di halaman depan.
• Read more silahkan ganti dengan kalimat yang Sobat kehendaki

Selamat mencoba dan semoga berhasil.