Read more otomatis dengan gambar

Kali ini saya akan memberikan trik bagaimana cara membuat tulisan readmore otomatis beserta gambar,sebenernya cara ini sama aja kya cara bikin readmore yang lainnya tapi uniknya di tambah gambar biar lebih menarik,,gimana ok??? jika kamu tertarik silahkan ikuti cara - cara nya dibawah ini, langsung aja gk pake lama ...

Caranya :
1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Cari kode
5. Copy kode di bawah ini,dan letakkan di atas


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


6. Lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
7. Ganti kode tersebut dengan kode di bawah ini..

<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;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='URL GAMBAR'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :
==> Summary noimg 430 = Tinggi artikel terpenggal tanpa image.
==> Summar img 430 = Tinggi artikel terpenggal dengan image.
==> URL GAMBAR = Diisi dengan file gambar kamu sendiri yang di upload dari Photobucket atau tempat penyimpanan gambar lainnya.

8. Save template
semoga berhasil...

Artikel Terkait