Membuat Read More Otomatis ( Auto Read More)

Kenapa perlu menggunakan Read More? Dengan Read More membantu kita untuk meminimalisir tampilan blog, ketika pertama kali homepage dibuka. Bayangkan jika kita menampilkan posting sebanyak tujuh posting (jumlah ini merupakan pemberian manual dari blogger.com), kemudian postingnya panjang-panjang, apa yang akan terjadi? Semua isi posting yang panjang itu akan terlihat di halaman homepage, dan tentu saja akan sangat mengganggu penampilan blog anda.

kelebihan kode ini diantaranya adalah tampilan gambar disetiap posting yang diberi read more. (lihat gambar blog congcot diatas).

Jangan lupa, cara ini sebaiknya digunakan jika belum edit template lebih jauh, jadi saran saya gunakan template yang dari minima blogger.

Nah, mari kita mulai sekarang.

Persiapan...
1. Seperti biasa masuk ke www.blogger.com.
2. Pilih rancangan atau tata letak.
3. Klik edit HTML.
4. Untuk menghindari kesalahan sebaiknya Klik Download Template Lengkap terlebih dahulu.
5. Kemudian centang Expand widget template.
6. Cari kode (gunakan ctrl+F untuk memudahkan pencarian)
7. Cari kode </head> , dan simpan kode dibawah ini tepat diatas kode </head>
Langsung copy paste aja...!

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Jika sudah, sekarang tahap terakhir..
Cari kode <data:post.body/> dan silahkan hapus, dan ganti dengan kode dibawah 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kata yang berwarna merah sesuai dengan selera anda.
Simpan Template. Selesai!