Read More Otomatis

Pada Zaman dahulu (hahaha..)dapurblogger pernah menulis artikel tentang cara membuat read more.

Artikel cara membuat read more sebelumnya adalah cara membuat read more dengan cara manual. Artinya kita perlu melakukan pemotongan artikel secara manual untuk efisiensi halaman posting pada blog kita. Walaupun hasilnya sama saja, namun tidak efektif dan efisien pada waktu penulisan artikel.

Untuk itu Kali ini dapurblogger akan membahas cara membuat readmore otomatis seperti readmore yang sering di gunakan pada template magazine yang sedang populer saat ini. Disamping karena menampilkan banyak judul artikel pada halaman awal, juga karena template ini kelihatan lebih profesional dan lebih enak di pandang mata.

Seperti yang saya katakan di atas, read more otomatis ini lebih efisien dan efektif karena kita tidak perlu memotong atau memenggal artikel secara manual. Untuk membuat read more otomatis, berikut langkah-langkah yang bisa sobat dapurblogger ikuti untuk membuat read more otomatis:

1. Login ke account blog sobat dapurblogger

2. Klik Layout

3. Klik Edit HTML

Cari kode </head> 

Letakkan kode di bawah ini 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://www.dapurblogger.blogspot.com
********************************************/
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 temukan kode <data:post.body/>

Ganti 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 == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:

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)

Semoga Bermanfaat