Membuat Readmore/Lihat Selanjutnya Memakai Gambar

Membuat Readmore/Lihat Selanjutnya Memakai Gambar

Memasang readmore ini adalah diletakkan di artikel pada halaman utama Kamu. Fungsi read more 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 kamu buat.

Memasang Auto Readmore dengan Gambar :

1. Masuk ke blogger
2. Pilih Template lalu Edit HTML,kemudian beri tkamu 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/AVvXsEgfO_DQD5f3sWx8VmWPaYwKQfdLnvCUYNevTzWoDV1Itoe4y4cpArrmzFFYbPzKi5oSi_vZLo1nSX2eRjoY4aXEB8OrSMZxkjqjEdaf7Mze3bcfEVsKzp9IMe9f8bV9or7GMCRylr3SB0qs/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

5. Simpan Template Kamu