Auto Readmore Blogger

Selamat berpuasa :D

Well, kali ini saya sedang asyik bermain blog diblogger saya. Oke langsung aja, mungkin jika di wordpress, kita dimudahkan dengan berbagai macam pluggins dan widget, nah menurut saya blogger sedikit rumit  yah, jadi kita harus menambahkan beberapa code HTML untuk membuatnya lebih mudah.

Sekarang yang kita lakukan untuk membuat auto readmore di blogger kita adalah sebagai berikut :  :nerd

1. Login ke bloggermu

2. Pilih Design > Edit HTML ; lalu centang pilihan Expand Widget Templates

Biasakan melakukan backup terlebih dahulu sebelum melakukan pengubahan template blogmu :army:

3. Masukkan kode dibawah ini sebelum kode </head>. Nb : untuk mencarinya tekan CTRL + F (masukkan kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</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: 1px; margin:0px 10px 5px 0px; border: 3px #ccc solid;"><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>

4. Setelah memasukkan kode di atas, cari kode berikut :

<data:post.body/>

5. Ganti dengan kode dibawah ini :

 <b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/></b:if>

Setelah melakukan step-step di atas, save template.

Nah, sekarang blogmu sudah ditanamkan fitur auto readmore, kalo misalnya ingin melihat contohnya kamu bisa mampir ke SINI

Mudah kan ?? silahkan mencobanya. source : Here