Cara Membuat Read More Otomatis (Auto Read More) di blog

Not your language? Choose your language here Saya buat posting ini sebenarnya karena ada temen saya di sekolah (namanya Pramana) yang pengen tau cara membuat read more di blog. Rasanya menyenangkan karena bisa jadi bantu temen buat ngeblogging, jadi tambah banyak deh yang suka nge blogging. Ok, semoga buat Pramana dan para blogreaders  bisa bermanfaat.

Tapi, sebelum saya mulai... mungkin ada blog yang udah memakai read more yang manual. Jadi agar read more otomatis ini mau bekerja di blog anda, anda bisa melakukan cara berikut:

<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&gt;

<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

- Hapus kode yang berwarna merah

Ok, setelah read more manual di blog anda sudah dinonaktifkan, sekarang anda bisa memasang read more otomatis di blog anda:

1. Pertama yang harus anda lakukan adalah Log in ke akun Blogger anda.
2. Buka Tata Letak --> Edit HTML, centang Expand Template Widget.
3. Cari kode </head> dan paste kode berikut di atas 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>

- Keterangan:

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

4. Setelah dipasang, sekarang anda cari kode <data:post.body/> dan ganti kode <data:post.body/> dengan kode berikut:

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

- Tulisan READ MORE tersebut bisa anda ganti dengan tulisan apa aja.

Dan setelah itu simpan deh dan lihat hasilnya. Semoga tips ini bisa bermanfaat dan selamat mencoba :)