membuat read more otomatis dengan ditambahi gambar

halo sobat blogger.Dulu saya gak tau gimana cara buat Read More di portingan kita,dan sekarang TRINGG TRIINGGG . Dan pada kesempatan kaliini saya akan memberikan tutorial blog, yaitu cara membuat read more otomatis dengan ditambahi gambar. JIka anda tertarik dengan ini, anda bisa mencoba tutorial ini. Trik ini sangat mudah. Langsung aja ya..!!



CEKIDOOOTTT....

1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Centang Expand Template Widget
4. Cari kode </head>
5. Copy kode di bawah ini,dan letakkan 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>

6. Lalu cari kode <data:post.body/>
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOuMPxAbJu_5U3KNF4e6Fmwnax4XE_5gyj1fr0CtukLog0-0nFfEaxQqW5VVbHpgpK8IqjTqwCmzI2sJkXAVqsNRQpLhOLZIDNySEgewJZ2rRt1DWUQLOqP0T_-tHzSF-KuqJci0-F8F2/'/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

ket: gambar readmore bisa diganti, dengan cara ganti URL gambar(yg warna merah)

8. Simpan

semoga bermanfaat guys, jika kurang jelas tinggalkan komentar saya akan membantu sebisa saya