cara pasang auto readmore tampil dengan gambar

mungkin sobat bingung yaaa readmore tampil dengan gambar?? hehehe habis bingung mau bikin judulnya

hehe...itu maksudnya   postingan yang tampil di homepage ketika readmore otomatis itu berfungsi akan menampilkan gambar disetiap postingan kecuali postingan sobat tidak berisi gambar.

readmore otomatis untuk blogger ini cukup praktis dan mudah .sekali seting aja /tidak usah melakukan secara manual lagi untuk memotong postingan yang akan ditampilkan.

mari kita mulai tutorial blogger cara pasang auto readmore ini.

1-> seperti biasa login dan buka menu design-> edit html

2- cari kode berikut     </head>  

3-copy kode dibawah ini dan paste di atas kode yang tadi (kode no 3)

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

angka angka yang saya beri warna merah bisa sobat ganti sesuai selera.

setelah itu simpan template------

4-kembali ke edit html lagi  (kali ini anda harus mencentang kotak kecil dismping expand widget template)

5--->kemudian  cari kode seperti berikut     <data:post.body/>

klo sudah ketemu ganti kode <data:post.body/>  dengan 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 rajacolek- <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

yang terahir simpan template dan lihat hasilnya.
selamat mencoba semoga tutorial blogger ini bermamfaat...
makasih...