Cara Membuat Read More atau Baca Selanjutnya

pada artikel Cara Membuat Read More Otomatis dengan Thumbnail di Blogger 
saya sudah lengkap membahas Cara Membuat Read More Otomatis dengan Thumbnail di Blogger  namun saya akan membahasnya lagi dengan tulisan selain READ MORE karna buat newbie kalau tidak langsung contoh yang siap dicopy paste akan sulit "aku kan juga newbie" jadi tahu bagaimana newbie hehe...
caranya masih sama dengan di artikel Cara Membuat Read More Otomatis dengan Thumbnail di Blogger
Silahkan Login dan masuk
lalu klik Rancangan dan klik Edit HTML
Centang Expand Template Widget
Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
Cari kode </head> dan kalau sudah ketemu
Tambahkan kode dibawah ini tepat nya diatas kode </head> :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 220;
img_thumb_width = 220;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Fais

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>
lalu cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :
 <b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>BACA SELANJUTNYA - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
atau pakek yang lebih aneh,yaitu pakek bahasa madura contohnya:
<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>BECAH SELENGKAPAH - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
 Tahap terakhir setelah selesai pengeditan simpan Templete dan lihat aja hasil nya.
pasti keren deh hasilnya hehe...

9 komentar: