Cara Membuat Auto Readmore dengan Gambar

dapat dipasang dengan mudah. Cara memasang readmore ini adalah diletakkan di artikel pada halaman utama Anda. Fungsi read more / baca selengkapnya adalah untuk memotong / meringkas sebuah artikel dengan hanya menampilkan beberapa karakter text.

Selain mempersingkat kalimat yang ditampilkan pada sebuah artikel, read more otomatis akan bekerja secara automatic ke semua artikel posting yang kita buat. Langsung saja ke cara pembuatan dan pemasangan tools baca selengkapnya di blogspot.

Cara Memasang Auto Readmore dengan Gambar :
1. Login ke blogger.com
2. Pilih Template lalu Edit HTML,kemudian beri tanda di kotak Expand Widget Template.
3. Cari kode </head> dan letakkan kode di bawah ini diatasnya.

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

4. Lanjutkan dengan meletakkan kode di bawah ini diatas kode <data:post.body/> :

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguDLywuN6j-2YMQprtKmd75UbZTaTEpeMdbk8ifPG5wnGM749cqVq4CgAMeqjhH5O5JGMpjPV3Xw6YZlE_LEg9UCHfNF-GlAAMMBh15UhW3oaFScOlDXAASLY7iYR4uwUKxj7J0pDZi4d0/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

5. Save Template Anda.