Cara Memasang Auto Read More

Apakah anda bermasalah dengan read more di blog anda? Ini dia Auto Read More terbaru yang patut dicoba bagi anda yang pengen blognya keliatan rapi seperti punya saya.. #eaaaa..bercanda ^^ .. Auto Read More ini secara otomatis akan menampilkan gambar pertama dalam postingan dan menfloadnya dialinea pertama paragraf. Selain itu, Auto Read More ini dapat memenggal paragraf secara otomatis dan dapat diatur jumlah karakter yang ingin ditampilkan. Bingung yah? J Untuk referensi bisa melihat Read More pada blog saya ini J. 

Nah, dibawah ini merupakan cara untuk mamasang Auto Read More pada blog anda.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna kuning 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;'/>

Kalo sudah, silahkan lanjutkan dengan tutorial dibawah ini.

Pertama, silahkan tuju langsung kehalaman EDIT HTML. Cari kode </head> kemudian letakkan script dibawah ini diatas kode </head> . Kalo sudah, jangan lupa simpan terlebih dahulu.

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>

Masih pada halaman EDIT HTML, beri tanda centang pada “Expand Widget Template” lalu temukan kode seperti dibawah ini :

<data:post.body/>

Kalo sudah, ganti kode tersebut 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>

Silahkan simpan dan lihat hasilnya J

Keterangan:

var thumbnail_mode =”float”  (kita dapat menentukan apakah letak thumbnail di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (menetapkan berapa banyak karakter akan ditampilkan dipoting tanpa gambar/thumbnail)

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

img_thumb_height =120; (thumbnail ‘tinggi dalam piksel)

img_thumb_widht = 120; (thumbnail ‘lebar dalam piksel)

Selamat Mencoba J

Referensi: http://www.o-om.com