membuat otomatis readmore blogspot

Tutorial kali ini kita akan membuat otomatis readmore pada blogspot, tidak seperti cara yang lama yaitu menyisipkan kode tertentu saat posting akan tetapi langsung kita rubah pada template jadi ketika kita psoting otomatis akan dipotong dan diberi link untuk membaca posting lebih lengkap.
Ok kita langsung saja, masuk ke layout > edit HTML jangan lupa centang "Expand widget template" temukan kode </head> dan letakkan kode 1 sebelum kode </head> Kemudian, cari dan ganti kode <data:post.body/> dengan kode 2.


kode 1

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

kode 2

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

Keterangan:

1. var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
2. summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
3. summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
4. img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
5. img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
6. READ MORE; bisa diganti dengan Baca Selengkapnya.. dll

 Ok! sekian dulu tulisan membuat otomatis readmore untuk blogspot. semoga bermanfaat!