Cara Membuat Auto Read More pada Posting Blog

Biasanya template default dalam setiap potingan akan menampilkan isi artikel secara keseluruhan, nah untuk mempersingkat berita kita bisa menampilkan tombol Selanjutnya / Read more ( Lihat gambar dibawah )

Kalau Anda tertarik silahkan ikuti tutorial dibawah.

1.  Login ke Blogger Dasboad
2.  Masuk Ke tab Rancangan
3.  Pilih Edit HTML tab
4.  Klik Expand Widgets
5.  Silahkan Anda Backup Dulu templatenya sebelum di mulai dengan memilih tulisan Download Full      Template
6.  Lalu Cari Kode berikut :  </head>
7.  Ganti Dengan Kode di bawah ini :

<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 type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>
</head>

Anda bisa merubah Ukuran dengan mengganti no di kode berikut :

summary_noimg = 430; -->jumlah karakter bila tidak ada gambar
summary_img = 340; -->jumlah karakter jika ada gambar
img_thumb_height = 100; -->tinggi gambar
img_thumb_width = 120; -->lebar gambar

sekarang Anda cari kode berikut :

<data:post.body/>

lalu Anda ganti dengan kode di bawah ini :

<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 expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

Silahkan Anda Preview untuk melihat perubahan, Kalau berhasil tinggal Save Template.

Selamat Mencoba...