Cara Membuat Read More Automatis

Assalamu'alaikum Wr. Wb. Segala puji bagi Allah SWT, atas karunianya . Saya masih bisa di beri kesempatan untuk posting. kali ini saya daris ingin mengshare bagaimana cara membuat readmore automatis?

Fungi readmore :

Fungsi auto read more kali ini mampu menampilkan gambar pertama dalam sebuah poting. Fungsi auto read more ini bisa dibilang lebih mirip dengan artikel terbaru dengan thumbnail.

contoh blog yang memiliki auto read more

Kelebihan dan kekurangan :

Kelebihan  dari fungsi auto readmore ini kali ini yaitu kita bisa mengatur berapa banyak karakter yang akan ditampilkan. Ada karakter yang bisa ditampilkan jika ada sebuah gambar dalam postingan yang anda buat. Dan adapula yang tanpa menampilkan gambar.Sedangkan kekurangannya adalah kita tidak bisa membuat page atau halaman lain di blog dan dapat membuat blog kita menkadi berat.

oke langsung saja saya beritahu caranya :
1. Klik Expand widget template
2. Setelah itu  cari kode </head> , agar lebih mudah dalam mencarinya silahkan tekan control + f
3. Jika sudah Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> .
copy paste script auto read more ini :

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

5. Cari Kode <data:post.body/>  . 
6. Jika sudah ketemu, maka ganti kode <data:post.body/> dengan semua kode dibawah 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>

7. Simpan dan selesai.

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 artikel ini bermanfaat bagi kalain semua, akhir kata..

Wabillahi Taufiq Wal Hidayah. Wassalamu'alaikum Wr. Wb.