Membuat Readmore Otomatis (auto readmore)

Assalamualaikum...

  Biasanya biar gak terlalu panjang, maka postingan pada halaman depan itu disingkat, maksudnya yang tadinya panjang hanya sebagian saja yang ditampilkan, nah untuk membuat yang semacam itu menggunakan read more, jika pembaca ingin melanjutkan membaca postingan tersebut yaitu dengan cara mengklik read more atau bahasa indo nya baca selengkapnya . . .

   Dari pada membuat read more secara manual yang ribet dan banyak kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu. . .

Langsung aja gan nih cara-caranya, cekidot . . .

Bismillah....

Image

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut :

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>, hapus kode tersebut dan gantilah dengan kode berikut:


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

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>


Selamat mencoba. . :D