Cara Membuat Auto Read More Pada Postingan Blog

Readmore digunakan untuk menampilkan sinopsis atau sebagian dari postingan sehingga ketika pengunjung memasuki halaman homepage atau halaman utama akan muncul beberapa pilihan postingan dan dapat memilih atau membacanya salah satu atau semuanya. dengan demikian tampilan halaman utama blog anda akan terlihat simple, tertata rapi dan anda dapat menambahkan widget-widget lainnya pada widget blog anda agar blog anda semakin terlihat menarik.

Berikut cara membuat readmore pada blog sahabat :

• Masuk ke akun blog anda
• Pilih >> Rancangan-edit HTML.
• Centang pada >> Expand Widgets Templates
• Temukan </head>  dengan cara tekan Ctrl+F dan copas tag berikut </head>
• Silahkan Block kode diatas dan gantilah dengan kode script dibawah ini :

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

Keterangan :

kode diatas anda dapat mengubah point berikut:

1. summary_noimg = 250;: panjang Ringkasan jika tidak ada gambar 
2. summary_img = 250;: panjang Ringkasan jika memiliki gambar 
3. img_thumb_height = 120;: tinggi gambar Thumbnail 
4. img_thumb_width = 120;: lebar gambar Thumbnail

"jika anda bingung gunakan kode standart diatas"

• Setelah kode diatas dipasang kemudian anda cari tag berikut <data:post.body/> caranya seperti diatas, gunakan Ctrl+F. 
• Kemudian sahabat block kode <data:post.body/> dan ganti dengan kode berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/> <b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/> <b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/> </div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script> <div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'>
<a expr:href='data:post.url' >Read more ... </a></span> </b:if> </b:if>

• Save dan cek hompage atau halaman utama blog anda apakah berhasil atau tidak.

Demikianlah panduan membuat auto readmore pada blog. semoga panduan ini dapat memandu anda dengan benar dan bermanfaat. terimakasih.