Membuat Readmore dengan gambar thumbnail pada posting secara otomatis

Untuk membuat tampilan tulisan posting menjadi mempunyai link "read more" (atau "baca lebih lanjut") dengan gambar thumbnail secara otomatis seperti pada Homepage blog ini (lihat gambar diatas), caranya adalah sebagai berikut:

1. Masuk ke Blogger –> Template –> Edit HTML

2. Dengan menggunakan CTRL + F, carilah baris kode

<data:post.body/>

dan ganti dengan baris kode berikut:

<!--tambahan untuk readmore dengan thumbnail posting-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Baca selengkapnya &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<!--akhir tambahan-->

dimana tulisan Baca selengkapnya dapat diganti dengan kata lain yang diinginkan.

Catatan: mungkin ada lebih dari satu baris kode <data:post.body/>, cobalah dengan baris kode terakhir, jika tidak ada perubahan, coba lagi dengan baris kode sebelumnya.

3. selanjutnya, dengan menggunakan CTRL + F, carilah baris kode

</head>

dan tambahkan baris kode berikut tepat diatasnya

<!--tambahan untuk readmore dengan thumbnail posting—>
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 300;
img_thumb_height = 150;
img_thumb_width = 200;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!--akhir tambahan-->

dimana:
posts_no_thumb_sum = 490 adalah banyaknya karakter tanpa thumnail
posts_thumb_sum = 300 adalah banyaknya karakter dengan thumbnail
img_thumb_height = 150 adalah tinggi thumbnail
img_thumb_width = 200 adalah lebar thumbnail
gantilah angka yang berwarna merah sesuai keinginan.

5. Simpan dan lihat hasilnya.

Itulah cara yang dipakai blog ini untuk membuat tampilan tulisan posting menjadi mempunyai link "read more" (atau "baca lebih lanjut") dengan gambar thumbnail secara otomatis. Selamat mencoba dan semoga berhasil.

sumber: http://helplogger.blogspot.co.id/2012/03/auto-read-more-with-thumbnail-for.html