Cara Membuat Read More Automatis + Thumbnail (Versi 3)

Berikut Cara Membuat Read More Automatis +Thumbnail:

1. Seperti biasa, login dulu ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Letakkan kode berikut di di bawah kode </head>

<!-- Read more v3 -->
<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; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more v3 end -->

Note:
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail

4. Klik Save Template

5. Tetap di Edit HTML, lalu centang Expand Widget Template

6. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

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

Tulisan READ MORE - bisa anda ganti sesuai keinginan.

7. Save lagi template nya.

Siap deh semunya. Sekarang tinggal anda coba, Ok! Have a nice dream…! Hehehe…!

Jangan lupa kasih komentar ya…