Cara Memasang "Readmore" Otomatis Pada Blogspot

P

ada postingan kali ini, saya akan membahas bagaimana membuat "Readmore Otomatis", seperti yang Anda lihat pada halaman pertama blog saya ini. Pada dasarnya penggunaan "readmore" ini bertujuan untuk meringkas artikel pada setiap postingan dan dimunculkan pada halaman pertama blog. Dan lebih menariknya lagi dalam ringkasan tersebut kita bisa tambahan image thumbnail untuk memberikan kesan menarik dan elegan yang diletakkan di awal paragraf.

Bukan hanya itu saja, disini kita dapat pengatur jumlah karakter yang akan ditampilkan dalam ringkasan. Ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image thumbnail yang ikut ditampilkan dalam postingan dan yang kedua jumlah karakter tanpa image thumbnail. Dan Anda bisa juga mengatur lebar dan tinggi image thumbnail yang akan di tampilkan.

Oke.. untuk lebih jelasnya, langsung saja kita pada pembahasan inti tentang bagaimana cara memasang "Readmore Otomatis" dalam template blog kita. Berikut langkah-langkahnya :

[1]. Silahkan Anda login dulu ke Blogger
[2]. Masuk ke "Rancangan/Layout" dan klik "Edit HTML"
[3]. Jangan lupa centang "Expand Template Widget"
[4]. Cari kode </head> kemudian letakkan script di bawah ini di atas kode </head> tadi.

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

Jika sudah silahkan klik "Simpan Template" untuk mengamankan script di atas.

[5]. Langkah berikutnya, silahkan Anda cari kode berikut ini : <data:post.body/>
[6]. Ganti kode <data:post.body/> dengan script 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 class='rmlink' style='float:right'><a expr:href='data:post.url'><span style='font-style:italic;'> &gt;&gt; read more.. </span></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

[7]. Kemudian "Simpan Template" dan silahkan lihat hasilnya.

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; (banyak karakter akan ditampilkan di ringkasan tanpa gambar/thumbnail)
summary_img = 250; (banyak karakter akan ditampilkan di ringkasan dengan gambar/thumbnail)
img_thumb_height = 120; (tinggi gambar/thumbnail)
img_thumb_width = 120; (lebar gambar/thumbnail)

Bagaimana, mudah bukan..??
Yahh, mudah-mudahan postingan kali ini bisa membantu Anda dan membuat blog Anda jadi lebih menarik dan elegan seperti yang Anda inginkan.

Selamat mencoba dan semoga bermanfaat..