Cara Pasang Read More Otomatis

Fungsi Read More Otomatis yang dimaksud disini berbeda dengan versi Read More lama. Versi lama kita harus memotong tulisan dengan memanggil fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span>yang kita pasang secara manual ke dalam halaman postingan. Fungsi Read More Otomatis ini dapat dibilang lebih canggih karena fungsi pemenggalan kalimatnya secara otomatis langsung bekerja tanpa melewati proses penambahan kode diatas. Fungsi read More otomatis ini juga mampu menampilkan gambar pertama dalam setiap postingan kita. kita dapat pula mengatur berapa karakter yang akan ditampilkan baik yang ada gambarnya maupun tidak. Cara memasang Read More Otomatis ini tidaklah rumit.Anda bisa ikuti caranya sebagai berikut :

Untuk yang terlanjur memasang Read More lama, kodenya sebaiknya dikembalikan dulu seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<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;'/>

Langkah berikutnya kita masuk ke EDIT HTML, kemudian cari kode </head>. Selanjutnya letakkan kode dibawah ini diatas kode </head> kemudian simpan.

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

Masih pada halaman EDIT HTML, kita aktifkan "Expand widget template" kemudian cari kode seperti ini

<data:post.body/>

terus ganti semua 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>

Langkah terakhir kita simpan dan lihat hasilnya.

4 comments:

Bangzabar said...

Makasih buat panduan read morex boss,,,

unksenna said...

thanks bro panduannya mantep bngt

amar said...

mkasih bozz

Segaran Media said...

oke semua bagus

Post a Comment