Cara Membuat Auto Readmore

Langkah 1

Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)

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

Anda bisa memodifikasi kode berikut ini
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
Ganti angka summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.

Ganti angka img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.

Ganti angka img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.

Langkah 2

Cari kode <data:post.body/> lalu ganti dengan kode berikut ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kata yang berwarna biru dengan left untuk menampilkan link readmore di bagian kiri dan right untuk menampilkan link readmore di bagian kanan.

Ganti kata yang berwarna merah dengan kata yang Anda suka. Misalnya Baca Selengkapnya atau Baca Selanjutnya.

Langkah 3
Klik tombol Pratinjau untuk melihat hasil. Jika hasil sudah sesuai, klik tombol Simpan.

Posted in: Cara, membuat, Tutorial Blog