Cara Membuat Read More Bergambar

Assalamualaikum semua..Kali ini mrul ingin berkongsi tips membuat readmore bergambar..Dahulu pernah mrul post cara membuat readmore.Readmore kali ini lebih menarik dan cantik..Jika anda tertarik dengan tips ini, anda boleh mencuba tips ini.

Langkah-langkah membuat readmore bergambar :

1. Sign blog anda.

2. Klik Design.

3. Klik Edit HTML.

4. Klik tanda pada kotak “Expand widget template”.

5. Cari kod ini </head>.

6. Copy kod dibawah dan paste sebelum kod </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>

7. Cari kod ini <data:post.body/>.

8. Gantikan kod <data:post.body/> dengan kod dibawah 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='http://i1231.photobucket.com/albums/ee512/syamrul88/9725.jpg'/></a></span>

</b:if>

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

Nota :Gantikan teks warna merah dengan URL gambar yang ingin anda tampilkan.

9. Save.

Selamat Mencuba..