Membuat readmore lengkap dengan gambar thumbnail

Readmore adalah salah satu fasilitas yang dapat membuat blog tampak lebih rapi dan ringan untuk di akses. Kali ini saya akan sharing mengenai cara membuat readmore lengkap dengan gambar. Untuk cara membuat cukup mudah karena hanya mengedit sebagian kecil kode html untuk pemasanganan readmore dengan thumbnail.

Berikut cara membuat readmore lengkap : (jika takut gagal download template lengkap dulu)

• Login ke blogger > Rancangan > Edit Html > Expand templates widget

Cari kode (Ctrl+F)

</head>

Setelah itu copas kode dibawah tepat di atasnya

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

Keterangan tulisan biru :
var thumbnail_mode = "float" ;  << ketik no-float jika ingin tanpa gambar
summary_noimg = 250;            << banyaknya text tanpa gambar
summary_img = 250;              << banyaknya text dengan gambar
img_thumb_height = 120;         << tinggi gambar thumbnail dan width lebar gambar
img_thumb_width = 120; 


Selanjutnya cari kode

<data:post.body/>

Lalu replace kode tersebut dengan kode di bawah 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:right'><a expr:href='data:post.url'><img src='http://URL gambar readmore'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Selamat mencoba !!

You're reading an article about Membuat readmore lengkap dengan gambar thumbnail and you can find this articles Membuat readmore lengkap dengan gambar thumbnail with url http://areacyber.blogspot.com/2011/09/membuat-readmore-lengkap-dengan-gambar.html,you can redistribute it or copy and paste it if the article Membuat readmore lengkap dengan gambar thumbnail very beneficial to your friends, but do not forget to put Membuat readmore lengkap dengan gambar thumbnail a source link.