Cara menbuat redmore dengan gambar

halo sobat blogaer kali.Di pagi ini saya akan share tentang Cara membuat redmore dengan gambar.Lantas apa bedanya dengan redmore yang biasa gan?????? ya jelas bedalah lah,,kan kalau yang biasa itu gak pakek gambar lha kalau yang ini tampilanya menggunakan link gamabar..contohnya seperti dibawah ni...

Untuk Demo bisa di lihat DISINI
Gima ada yang mau coba,,,,
langsung aja nih tutorialnya ane kasih gratis...

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/AVvXsEhHbdO_5jmfkXYqmEhJOg2w49Oo4IOK3Dxfx3q6u59odEevXjhgHmyn7DqI4LtFfkfXKbYgwxObZ2ViyKHYZyLvxyWR2v5R9yw8-9VFtxOsnCbpOZxhGxhVjMhpW95eDXpRT9Hisl3Jk6Yf/'/></a></span>
</b:if>

8.selesai.dan simpan template.

NB:kode yang berwana Merah silah kan di ganti dengan link gambar anda...
oke selesai sudah ane memberi totorial semoga bisa bermanfaat bagi kalian semua....