Cara Membuat Auto Read More / Tombol Selanjutnya pada Posting Blog

Sebelumnya saya pernah membuat Auto read more hack dengan menggunakan javascript, kali ini pembahasannya masih sama, yang membedakan kali ini adalah tanpa menggunakan javascript yang memakai web hosting. Apa bedanya ? fungsinya hampir sama saja tanpa ada perubahan, yang membedakan adalah dengan mengintegrasikan javascriptnya kedalam css blog kita, otomatis waktu loading yang di perlukan blog kita akan semakin cepat.

Cara Pertama
Caranya hampir sama dengan autoreadmore hack pertama, yang membedakan hanya code sebelum </head> Anda ganti dengan code di bawah ini :

<!--Auto Read More Start-->

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 350;

summary_img = 350;

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>

<!--Auto Read More End-->

Cara kedua
bila anda sama sekali belum pernah memakai auto readmore, ada cara yang lebih mudah daripada diatas
dan pastinya tanpa menggunakan javascript.

1) temukan code <data:post.body/> dengan menekan tombol ctrl + F di edit HTML

2) setelah menemukannya silahkan Anda ganti dengan code dibawah :

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.snippet'>

<b:if cond='data:post.thumbnailUrl'>

<div class='Image thumb'>

<img expr:src='data:post.thumbnailUrl'/>

</div>

</b:if>

<data:post.snippet/>

<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>