Oct 17, 2011

Cara Memasang AutoReadmore

Jumpa lagi dengan saya disini. :D Untuk mengisi posting kali ini saya akan share cara membuat readmore otomatis (khusus bagi template blog yang belum terdapat autoreadmore). Keunggulan autoreadmore ini yaitu menampilkan gambar postingan di awal paragraf, dan menyembunyikan sebagian paragraf yang ada. Sehingga tidak memakan tempat. Langsung saja ke tata caranya:

Pertama, masuk ke akun blog kalian.
Lalu ke Rancangan-Edit HTML
Centang kotak "Expand Widget Template"
Setelah itu cari kode dibawah ini
</head>
Paste kan kode dibawah ini tepat di atas kode tadi.
<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> 

Setelah itu cari kode ini

<data:post.body/> 

Lalu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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:
right'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Untuk yang tau kode-kode HTML, silahkan bisa di edit lagi sesuai keinginan kalian. Kalau yang masih belum tau, jangan dirubah. :)
Good Luck.


2 comments:

Terima kasih telah berkunjung. Mohon beri komentar jika ada yang kurang.