Cara Membuat Auto Readmore pada Blog

Hai sobat t'Net! gimna kabarnya?, yang pasti pada sehat semua nih. Apalagi saat ini saya akan memberikan sebuah trik yang akan membuat blog anda kelihatan lebih menarik dan tidak terlalu ribet. Adapun trik yang akan saya bagikan yaitu gimana caranya suapaya setiapkali kita melakukan posting tulisan kita tidak usah melakukan pemotonga teks. Akan tetapi secara otomatis teks kita akan terpotong pada halaman blog kita. Dan untuk lebih jelasnya tampilan dari datanya akan tampak sperti gambar di bawah ini:

Maka tampilan postingan anda akan tampak seperti gamabar di atas. Oke, sekarang kita langsung ke topik pembicaraan yah. Kita tidak usah berpanjang cerita.
Nah sekarang untuk menampilkannya pada blog kita, kita harus menjalankan langkah- langkah di bawah ini.

Jika blog anda telah terpasang sistem Read More silahkan anda hilangkan kodenya, sperti kode 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;'/>

Silahkan anda tendang kode di atah dari blog anda, dan jika anda tidak dapat menemukannya, tidak apa-apa kalau itu tetap ada di dalam blog anda.

Nah setelah itu silahkan anda cari kode seperti berikut </head> kemudian letakkan kode HTML di bawah ini tepat di atas kode tersebut

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

Kemudian silahkan anda temukan kode seperti ini <data:post.body/> dan ganti kode tersebut dengan kode di bawah 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 == "item"'><data:post.body/></b:if>

Kemudian Simpan Template

Catatan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba.