Tip cara mudah membuat readmore otomatis blogger

Kalian tentunya sudah tahu apa itu readmore otomatis?.Ya,readmore otomatis merupakan cara untuk membuat ringkasan otomatis postingan sesuai yang kita kehendaki.Tujuannya untuk menghemat halaman depan blog kita.Sehingga tampilan blog menjadi lebih rapi,ringkas,enak dilihat dan mudah dibaca.Dengan membuat readmore otomatis kalian tidak perlu menambah kode-kode html setiap posting.Jadi lebih mudah dan praktis.Nah,kali ini tip blogku akan memberikan tip cara mudah membuat readmore otomatis blogger:

1.Buka dashboard : Rancangan : Edit HTML : Centang Expand Widget Templates.

2.Letakkan script readmore otomatis dibawah ini tepat diatas kode: </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[
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>

3.Cari kode: <div class='post-body entry-content'> letaknya dibawah kode : <div class='post-header-line-1'/> setiap template bisa berbeda kode.Jadi yang harus diganti  kode diatas: <div style='clear: both;'/> <!-- clear for photos floats --> .Jika sudah ketemu ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<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;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Jika ingin membuat image readmore ganti bagian read more "<data:post.title/>" denga URL image readmore kamu sebagai contoh:<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsC9VPx3AXL_d34YjPjOzcbZDXwAY32996W1yYkK_cPdUHOXEMLS-UHh4KtJRyXd0XdfGfhwmlVccMRBBG2wKK_n2Jr1GsMGWfk-gmE04c3dITPcPXV0R8kMuxVPwiRAxHqr0MMLsfXKo/s1600/more.png'/>.
Kemudian lihat previewnya,jika berhasil silahkan simpan template.
Keterangan:
var thumbnail_mode = "float" ; ( letak thumbnail float atau no float )
summary_noimg = 250; (ringkasan posting tanpa gambar )
summary_img = 250; (ringasan posting dengan gambar)
img_thumb_height = 120; ( tinggi gambar dalam pixel)
img_thumb_width = 120; ( lebar gambar dalam pixel )
Readmore = Silahkan ganti sesuai selera.

Tweet