Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di Blog - mungkin sudah banyak yang mengetahuinya cara membuat read more otomatis pada blog,walaupun sekarang sudah banyak beberapa template blog yang mempunyai fitur read more otomatis tapi tidak ada salah nya saya re-share ulang untuk membuat read more otomatisu ntuk itu disini saya akan mencoba menjelaskan secara singkat Bagaimana Cara Membuat Read More Otomatis di Blog 

Dalam tutorial ini saya menggunakan Template Sederhana (standar) dari Blogger.

Baik, langsung saja kita mulai cara cara membuat read more otomatis di blog .

Cara Membuat Read More Otomatis di Blog :

1. Masuk ke Menu Template dan klik Edit Template .

2. Klik CTRL + F, dan cari kode html </head>

3. Letakan kode dibawah ini, tepat diatas kode html </head>

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 275;

summary_img = 275;

img_thumb_height = 120;

img_thumb_width = 120;

</script> 

<script type='text/javascript'>

//<![CDATA[

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>

4. Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML 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>

<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar dan biasa yang diganti adalah yang kode Kedua ( itemprop='description articleBody' ) 

6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil

*Semoga Bermanfaat untuk agan agan :)