CARA MEMBUAT READMORE OTOMATIS

Readmore berfungsi untuk menspit (memotong) artikel suatu postingan. Pembuatan readmore memang ada yang manual dan ada yang otomatis. Jika menggunakan manual maka anda perlu menyisipkan script untuk memotong artikel di tempat yang anda inginkan, dan pada akhir artikel.
Namun jika anda suka yang serba otomatis, maka kita bisa membuat readmore yang otomatis (RMO) atau Automatic Read More (RMA). Jadi jika anda sering update postingan maka dengan RMO ini akan memudahkan anda.
Dalam membuat ARM/RMO ini terdapat 2 script. Script pertama di letakkan di atas kode dan script ke 2 untuk mengganti script .
Cara meletakkan ke 2 script tersebut adalah:
  1. Login ke dashboard kemudian pilih design, kemudian pilih edit html kemudian cari kode kemudian letakkan scrip no 1 di atas kode , kemudian save template anda.
  2. Untuk script yang kedua, masih pada halaman edit html, berilah centang pada "expand widget template", kemudian carilah kode , setelah itu ganti kode dengan script ke 2. kemudian simpan template.
berikut script ke 1 dan ke 2:
Script 1 :





Script 2 :





READ MORE -


Scrip ke 1:
<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>

Script ke 2:

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

Nah sekian duluw tipsnya, selamat praktek dan semoga bermanfaat.. jangan lupa commentnya hehe..
Catatan : Untuk Anda yang telah membuat read More dengan Metode Manual harus dibersihkan dulu seperti default, hapus pada bagian warna merah, seperti contoh di bawah ini :














Readmore





Semoga bermanfaat :)
Thx to www.o-om.com dan www.en.vietwebguide.com atas scriptnya. 

1 comment:

  1. mantap mas...silahkan mampir juga di blog saya mas...trims

    ReplyDelete

Silahkan berkomentar di belajar NgeBlog
terimakasih atas komentarnya