Membuat Auto Read More - Versi 2

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf atau dengan kata lain ini merupakan fasilitas image thumbnail. Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan.

Penting!!
Bagi anda yang sudah memasang Read More versi lama, silahkan kodenya di kembalikan dulu seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, silahkan disesuaikan).




<div class='post-header-line-1'/>

<div class='post-body'>


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

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>


<a expr:href='data:post.url'>Readmore</a>

</b:if>

<div style='clear: both;'/>


Jika sudah mari kita ke intinya..^^
1. Masuk ke halaman EDIT HTML.
2. Cari kode </head>
3. Letakan script dibawah ini di atas kode </head> 
4. Langsung copy paste kode dibawah ini:



<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>


5. Selanjutnya, beri tanda centang pada "Expand widget template" lalu cari kode seperti dibawah ini.


<data:post.body/>

6. Kalo sudah, ganti kode
<data:post.body/> dengan kode dibawah ini


<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>


7. Pilih save template..^^

Keterangan:

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

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

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

img_thumb_height = 120; (untuk Menentukan tinggi thumbnail dalam piksel)

img_thumb_width = 120; (Untuk menentukan lebar thumbnail dalam piksel)

"Selamat mencoba...."