Cara Membuat Auto Read More(Dengan Gambar)

 Setelah saya Sebelumnya Posting Tentang Cara Membedakan Komentar Admin(Author)Dengan Visitor...

Dan saya sekarang Akan Posting Tentang Cara Membuat Auto ReadMore(Dengan Gambar)

*Contoh :

Cari Tag </head>, Kemudian Copas Script ini di atas Tag </head>, (Jangan Lupa Expand Widget Ya)

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


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

(C)2008 by Anhvo

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> 

Setelah itu Simpan Setelan, lalu kamu cari  <data:post.body/> pada Html Kamu.

Setelah Ketemu Ganti kode tersebut dengan :

<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Setelah itu Simpan Setelan Lagi.

Check This Out.

 Bila Anda Ingin mengganti Bacaan Read More Menjadi Gambar Seperti Pada Contoh

Dihalaman Edit HTML, ganti tulisan read more ato lainya yang sobat pake buat link baca selanjutnya dengan kode berikut <img src="link gambar kamu"/>

Contoh: <img src="http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif"/>

-Langkah terakhir dan terpenting adalah Save Template

Kalo sobat belum punya gambar ini aku sediakan

-
http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif

-
http://i496.photobucket.com/albums/rr329/grandisyf/th_arrow-readmore.gif
-
http://i496.photobucket.com/albums/rr329/grandisyf/th_more.gif
-
http://i496.photobucket.com/albums/rr329/grandisyf/th_Readmore3.gif

Logikanya :

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Sumber : MYSYSTEMPC

Tags : Cara membuat Readmore,Membuat Readmore,Cara membedakan komentar Author Dengan Visitor,Cheat Celestialuna ,Cara Mudah membuat Auto Readmore,Cara cepat Membuat Auto Readmore,Cheat PB Maret 2011[Udah Gk posting Cheat PB]