Mungkin di luar sana banyak tutorial Mengenai Pasang Auto Read More. Bisa dibilang saya ketinggalan...hehehe, apalagi Blogger juga sudah ada Fasilitas Read More atau yang dikenal dengan Jump Break. Menurut saya Auto Read More lebih bagus daripada Fasilitas Read More dari Blogger karena kita tidak usah memotong artikel tersebut dan yang lebih penting lagi Tampilan Posting Blog kita terlihat rapi karena jumlah karakternya sudah di tentukan serta Auto Read More ini mampu menampilkan image pada awal paragraf meskipun image tersebut ada di akhir.
Baiklah S'B, basa basinya udah dulu.. Kita langsung aja ke TKP...
Begini cara pemasangan Auto Read More :
1. Login Blogger
2. Pilih Rancangan
3. Pilih Edit HTML ( centang pada expand template widget )
4. Cari Kode </head>
5. Kopi 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)
(C)2008 by damZ Kusuma
visit http://dekaster-32.blogspot.com
********************************************/
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>
6. Selanjutnya Cari Kode <data:post.body/>
7. Kalo sudah ketemu ganti kode <data:post.body/> dengan kode dibawah
<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 == "item"'><data:post.body/></b:if>
8. Simpan dan Lihat hasilnya.
