Cara Membuat Auto Readmore di Bogspot

Bismillahirrohmaanirrahiim..

Berjumpa lagi kawan-kawan blogger !!! dipertengahan malam waktu posting ini, seperti biasa ingin berbagi tutorial-tutorial tentang blogspot atau bisa juga di sebut trik-tips lah... he..2x. thanks bgt buat o-om yang udah banyak bagi2 ilmunya kepada Ane pribadi khususnya...

Tanpa panjang lebar kita mulai aja yuk.... Upz, mungkin untuk sedikit gambaran, apa sih Auto readmore ituh??? oke deh, dari pada Ane suruh jelasin bla bla bla dan kurang jelas mending langsung ane kasih contohna aja kali yah, biar lebih Afdhol gitu loh... he2x, contohnya seperti di tampilan depan blog ini " arzaku.blogspot.com " ataupun bisa lihat disini " http://free-blogger-templates09.blogspot.com/ " ... kalo males liat linknya!!! oke deh ane kasih screen shootnya....

Kalo udah mudeng yuk siap2 seperti langkah-langkah mengedit template sebelumnya, dan yang perlu diperhatikan juga kalo blog kamu udah pake read more silahkan kembalikan seperti semula... hm.. kalo bingung kode apa aja yang perlu di buang baca tutorial read more yang ini biar paham bagian mana yang perlu dibuang, gimana????

Weleh masih bingung juga toh??? yaudah ane kasih scriptnya deh yang perlu ditendang

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Nah ... udah ketahuan tuh... silahkan buang yang warna merah yah... kalau sudah sementara di Simpan dulu yah.

Masih pada area edit html kamu centang dulu expand widget dan temukan kode ini </head> dan silahkan taruh script dibawah ini diatasnya

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

dan temukan kode ini <data:post.body/> dan pastikan sudah di " centang widget" yah... dan ganti kode <data:post.body/> menjadi semua 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>

Simpan, Selesai dan dra.. da... blog kamu sudah agak berbeda...


Ps:

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)