Cara Membuat Readmore Otomatis Di Blogger

Masih teringat dalam ingatan saya ketika baru pertam kali buat blog, saya belajar kesana-kemari dan mencari informasi dengan berselancar di Google. Widget blog pertama yang saya ketahui adalah fitur Readmore karena fitur ini sangat terkenal pada saat itu, apalagi masih sedikit orang yang mahir ngeblog.

Karena pada saat itu saya kurang termotivasi, akhirnya saya hentikan kegiatan ngeblog, walau pada akhirnya kembali ngeblog setelah beranjak SMA (kok malah curhat).

Nah ketika mendownload template dari suatu situs, saya melihat ada yang menarik, yaitu fitur readmore nya yang otomatis. Artinya tanpa kita beri kode 'span=blablabla' fitur Readmore tetap muncul. Salah satu contohnya lihat pada blog saya Belajar Gitar Online

Fitur readmore otomatis ini sangat membantu, terutama bagi blogger yang artikelnya sudah berjumlah sangat banyak sehingga tidak perlu mengedit satu per satu. Jika sobat tertarik untuk menerapkannya di blog sobat, ikuti langkah berikut ini.

1. Seperti biasa, log in ke akun Blogger sobat.
2. Klik pada Rancangan, lalu pilih Edit HTML . Beri centang pada Expand Widget Templates. Backup terlebih dahulu template sobat, caranya klik Download Template Lengkap.
3. Cari kode </head>, lalu letakkan kode berikut tepat diatasnya.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>


4. Anda sudah pertengahan jalan. Sekarang cari kode <data:post.body/> atau <p><data:post.body/></p>. Jika sudah ketemu, hapus kode tersebut dan ganti dengan kode berikut ini.
   

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


5. Selesai! Klik Simpan Template.

Jika anda tertarik, anda juga bisa ganti tulisan Readmore menjadi berupa gambar. Caranya kode yang pada nomor 4 tadi diganti dengan kode berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Sekarang uji coba blog anda. Posting sebuah artikel dan taraa!! Halaman beranda blog anda sudah terpasang fitur Readmore.