Membuat Auto Read More / Tombol Selanjutnya Hack tanpa Javascript

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 { silahkan lihat disini untuk lebih jelasnya }, 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>

3) lalu anda cari code </b:skin> , setelah di temukan silahkan anda masukan code dibawah sebelum code tersebut :

.thumb img { float: left; margin: 0 10px 10px 0; }

4) silahkan klik tombol preview untuk melihat perubahan, bila sudah fix silahkan save template Anda

Selamat mencoba...