Info Blog : Cara Membuat Auto Read More untuk Blogspot

Auto Read More atau Baca selengkapnya sangat membantu kita dalam mempersingkat artikel pada halaman utama blog. Auto Read More bisa kita buat dengan cara manual atau Otomatis.

Jika kita menggunakan cara manual maka setiap kita menulis artikel, kita harus menggunakan "Insert jump break" untuk memotong artikel kita atau sering disebut juga "men-split artikel", dan kita harus menentukan sendiri sampai mana tulisan kita harus dipotong.

Beda ceritanya kalau kita menggunakan Script Auto Read More, saat kita memasang Script Auto Read More dalam blog maka secara otomatis artikel kita akan terpotong dengan sendirinya dan panjang tulisan artikel kita yang terpotong bisa sama.

Di bawah ini adalah langkah-langkah Membuat Auto Read More :
Pertama, silahkan masuk ke halaman EDIT HTML, Cari kode </head>
Letakkan kode 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[
/******************************************
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>

Kedua ,Kalau sudah, ganti kode <data:post.body/> ,ganti dengan kode dibawah ini :

<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Langkah terakhir Klik Simpan dan lihat hasilnya.

Catatan : Untuk Anda yang telah membuat read More dengan Metode Manual harus dibersihkan dulu seperti default, hapus pada bagian warna merah, seperti contoh di bawah ini :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>