Membuat Auto Readmore Pada website

Oke,, setelah telusur-telusur buat mempercantik tampilan blog saya.. saya mencari sebuaah altikel tentang membuat auto readmore pada website akhirnya nemu juga. Karena jika tidak ada auto read More pada sebubuah halaman website maka sebuah postingan kita kurang nyaman karena tulisan yang sangat panjang buanggeeetttt,..... pada sebuah website.... hehehehe...

oke langsung aja....

 

 

Yang perlu anda lakukan sebelum membuat auto readmore blogspot adalah melakukan backup terlebih dahulu template anda, sehingga apabila tejadi error anda tinggal upload kembali template yang lama.

Cara membuat auto readmore blogspot adalah sebagai berikut

1. Cari kode </head> kemudian letakkan kode berikut diatas 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[
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>

2. Cari kode  <data:post.body/> dan hapus. Kemudian ganti dengan kode berikut

<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' expr:title='data:post.title' rel='tag'>Read More... </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

3. Jangan lupa simpan.

Anda bisa memodifikasi tampilan auto readmore blogspot anda dengan mengganti kode yang berwarna merah.

summary_noimg = 250; (jumlah karakter yang muncul jika tanpa image thumbnail)
summary_img = 250; (jumlah karakter yang muncul jika menggunakan image thumbnail)
img_thumb_height = 120; (tinggi image thumbnail)
img_thumb_width = 120; (lebar image thumbnail)

sumber: blog tetangga :D