Home » , , » Membuat Auto Read More / Tombol Selanjutnya Hack tanpa Javascript

Membuat Auto Read More / Tombol Selanjutnya Hack tanpa Javascript

Written By Em Yahya on Sabtu, Agustus 06, 2011 | 12.35

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
Share this article :

1 comments :

  1. mas ada tidak cara untuk menambahkan karakter pada post snippetnya.. krn hanya di batasi 100 karakter..
    mohon balas di arimjie@gmail.com

    BalasHapus

Kami sangat menghargai komentar pembaca sekalian, baik saran, kritik, bantahan dan lain sebagainya.
Bagi pembaca yang ingin berkomentar silahkan untuk login.

Peraturan komentar:
-komentar pendek atau panjang tidak masalah, baik lebih dari satu kolom juga tidak apa-apa.
-komentar menggunakan bahasa yang baik dan benar tidak berbelit-belit.
-langsung pada topik permasalahan. Terimakasih

Blog Archive

 
Support : Dzul Kifayatain_Tis'ah | kanahayakoe | Coretane Emye
Copyright © 2013. emye Blogger - Kertahayu Boy - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger