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/AVvXsEjJx_9u-ef-JhtTybPMRD1REjFfzoDnMNaV3j4g-9g7RHt904pJD0HmvVDaKzeL-8gjLoeXi6VOqrpbWWASdeQI13vQB2Zr18Lp-J6HC0Bvp8NkxgoRvgTteZT2GwHoCzcekUeCHJvJkN0F/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
5. Save Template Anda.
Title : Cara Membuat Auto Readmore dengan Gambar Sendiri
Description : Cara Membuat Auto Readmore dengan Gambar dapat dipasang dengan mudah. Cara memasang readmore ini adalah diletakkan di artikel pada hala...
