Cara Membuat Readmore di Blogspot

Bismillah...

Buat para blogger, saya mau bagi-bagi info tentang bagaimana cara membuat readmore di blogspot agar tampilan blog kita lebih menarik. Readmore itu gunanya untuk memotong tulisan atau postingan kita di halaman beranda kita (home blog) agar yang tampil hanya sebagian sehingga membuat para pembaca mengklik "Readmore" atau "Baca Selengkapnya" jika ingin membaca postingan tersebut dengan lengkap. Sebenarnya sudah banyak artikel tentang ini yang dijelaskan oleh ahlinya. Dari sekian banyak artikel yang sudah kubuka dan kucoba di blog-ku, ada yang berhasil tapi bikin repot. Dan akhirnya, saya menemukan juga cara praktis dan otomatis membuat readmore. Ini langkah-langkahnya :

Ucapkan "Bismillah" dulu yaa...
1. Login (masuk) ke blogger.com atau blogspot.com
2. Click Design (Pengaturan)
3. Click Edit HTML
4. Click Expand Widget Templates
5. Cari kode </head>
6. Copy kode di bawah ini dan simpan di atas </head>

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

7. Cari Kode <data:post.body/>
8. Ganti <data:post.body/> dengan kode di bawah ini.

<!-- Auto read more Start -->
<!-- http://www.anakciremai.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<style>.fullpost{display:inline;}</style>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

9. Save Template
10. Selesai
11. Jika berhasil, say  "Alhamdulillah".


sumber: disini