Membuat Auto Readmore Pada Blogspot

Pada blogspot classic, secara default postingan anda akan memanjang kebawah. Ini sangat tidak enak dilihat oleh pembaca blog anda. Blogspot tidak menyediakan cara untuk memotong posting yang panjang ini, namun blogspot menyediakan cara dengan mengatur berapa banyak jumlah posting yang ditampilkan pada hompage anda. Yaitu dengan masuk setting, formatting, dan pada show most bisa kamu isi dengan berapa postingan yang dimunculkan. Cara seperti ini juga bisa saja, namun akan lebih cantik dan keren blog anda jika membuat auto readmore pada blogspot anda. 

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)

Anda coba sendiri menurut kesukaan anda. Semoga bermanfaat.

Posted in: Tips BlogeR,TipS DaN TriCk