Auto Read More untuk Blogger

 Auto Read More berguna untuk meringankan "beran badan blog anda" karena Auto Read More disini akan memotong sebagian dari posting anda dan jika pengjunjung tertarik tinggal mengklik saja Link "READ MORE - (judul posting) seperti pada blog ini. Auto Read More pada artikel ini mampu menampilkan thumbnail pada sebuah posing dengan otomatis (jika ada)

Auto Read More sangat berguna untuk mempercepat loading blog anda. Dan juga akan membuat blog anda terlihat rapi.

Pertama Login ke Blogger, klik Tata Letak, Edit HTML lalu copas nih kode... 


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

Masih pada halaman EDIT HTML, centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode dengan semua kode dibawah ini

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

Selesai dah!

Keterangan:

var thumbnail_mode = "float";  (posisi thumnail (kiri atau kanan) jika tidak ganti dengan (no-float)

summary_noimg = 250; (Menetapkan karakter yang tampil pada posting tanpa thumbnail)

summary_img = 250; (Menetapkan karakter yang tampil pada posting dengan thumbnail

img_thumb_height = 120; (Tinggi Thumbnail dalam Pixel)

img_thumb_width = 120; (Lebar Thumbnail dalam Pixel)

Good Luck!

Jika Blog ini bermanfaat bagi Anda, silahkan masukkan alamat email Anda di bawah ini untuk berlangganan :

ATAU klik disini untuk menjadi FOLLOWER di IndoBlogTrik