Cara Membuat Readmore Otomatis di Blogspot.
Kali ini zona-klik ingin sharing kepada sobat bagaimana cara membuat
readmore otomatis (auto read more) di blogspot. Mungkin telah banyak
yang membahas cara ini di blognya masing-masing, tetapi tidak ada
salahnya zona-klik mempublishnya.
Dengan adanya readmore otomatis, homepage blog kita akan terlihat rapi
dengan ketentuan tinggi dan lebar yang bisa di atur dengan mudah, juga
menampilkan thumbnails gambar di sampingnya.
Sebelumnya zona-klik minta maaf jika cara penyampaian di artikel ini
kurang dipahami dan dimengerti oleh sobat blogger, karena itulah
kemampuan dan pengetahuan zona-klik membahas cara membuat readmore otomatis di blogspot.
Tanpa perlu panjang lebar bercerita, alangkah baiknya langsung ke TKP, cekidot.........
cari kode </head> kemudian masukkan script di bawah ini persis diatas kode tersebut.
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 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
ganti kode tersebut dengan kode di bawah ini :
<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;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
Selamat Mencoba Sobat!!!
