Cara Membuat Auto Readmore pada Blogspot atau Blogger

Pada template blogger asli memang belum ada 'readmore' nya alias postingnya ditampilkan full sehingga panjang sampai bawah apalagi bila terdiri dari beberapa posting, Nah kali ini kita akan belajar bagaimana membuat tulisan Readmore, atau tampilan ringkasan, Yang akan dijelaskan di sini adalah membuat Readmore otomatis, Berikut penjelasannya.

Masuk blogger > rancangan > edit html > jangan lupa centang (v) expand template widget

cari kode </head> (Untuk mempermudah, tekan "Ctrl+F") kemudian letakkan salah satu script di bawah ini tepat di atas kode </head>

 

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 210;
img_thumb_height = 120;
img_thumb_width = 150;
</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>

atau yang ini

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 300;
summary_img = 210;
img_thumb_height = 120;
img_thumb_width = 150;
</script>
<script src='http://keerthiset2.110mb.com/excerpt.js' type='text/javascript'/>

Keterangan Scriptvar thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 300; (Adalah jumlah karakter yang akan ditampilkan di posting jika tanpa gambar / thumbnail)
summary_img = 210; (Adalah jumlah karakter yang akan ditampilkan di posting jika ada gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)

Kemudian selanjutnya cari kode <data:post.body/> (jika ada lebih dari satu, cari yang pertama / yang paling atas) setelah ketemu hapus atau ganti kode tersebut menjadi seperti di bawah ini

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

Keterangan:
Tulisan "Read More" silakan diganti sesuai selera misalnya "Baca Selengkapnya" atau yang lain

Setelah Itu Jangan Lupa Save Template

Ternyata gampang ya.. selamat memcoba.
Semoga bermanfaat.

Sharing via:

Tweet