Cara memasang Auto Readmore

Cara memasang Auto Readmore memang perlu di terapkan dalam blog kita agar loading blog kita tidak lemot. Kalau sobat belum tau apa itu readmore, saya akan sedikit menjelaskan. Read more itu dalam istilah lain Jump Break yang berfungsi menyingkat post kita pada halaman Home Page agar tidak terlalu panjang. Meskipun blogger sudah support fungsi readmore, tetapi masih banyak kok sob yang menggunakan auto readmore pada tutorial ini. Untuk mengetahui bagaimana Cara memasang Auto Readmore bisa sobat lihat di bawah ini:

1. Login pada blog sobat

2. Template

3. Edit HTML lalu Lanjutkan

4. Download dulu templatenya biar gak terjadi hal - hal yang tidak diinginkan dengan cara mengklik Download Template Lengkap

5. Cari kode </head> untuk mempermudah pencarian klik ctrl + f pada keyboard

6. Copy kode dibawah ini di atas kode </head>

<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)

********************************************/
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>

7. Selanjutnya cari kode <data:post.body/>
8. Ganti kode <data:post.body/> 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'><b>Read More . .</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9. Simpan Template

Selesai Deh..


Keterangan: 
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat Mencoba ! ! !