Cara Memasang Read More Otomatis

Awalnya sebelum posting tema ini, saya lumayan pusing karena pengen masang tombol "Read More" pada blog saya. Nah saya coba-coba cari cara dan script nya di Google, nemu deh. Tapi kebanyakan postingan tentang cara memasang read more versi lama alias kita harus cut and paste script sebelum melakukan posting atau harus memotong secara manual postingan dan menyisipkan kode <div class="fullpost">..</div> atau <span class="fullpost">..</span> diantara kalimat yang ingin kita jadinya paragraf awal dan paragraf selanjutnya apabila nantinya kita klik link "Read More". Berbekal sedikit ingatan karena saya juga ada beberapa blog yang ternyata sudah ada fungsi read more otomatisnya tapi saya lupa script nya :D ... saya cari deh, dan akhirnya berlabuhlah pencarian saya di official blognya si O-om.com . Di artikel yang o-om.com tulis pas dan sesuai sekali dengan apa yang saya inginkan. Read More otomatis tanpa harus cut and paste postingan. Eits...ternyata fungsi script yang dijelaskan oleh o-om.com tidak hanya sebatas memberikan fungsi "Read More" saja, tapi kita juga bisa mengatur berapa jumlah kata yang akan ditampilkan sebagai paragraf awal secara otomatis juga dapat secara langsung meng-capture gambar pada postingan kita sehingga akan tampil pada paragraf awal meskipun posisi gambar tersebut terletak di tengah ataupun di akhir paragraf postingan.

Berikut ini adalah cara pemasangan "Read More" otomatis :
Langsung ke Edit HTML cari kode ini </head> nah kalo dah ketemu berikutnya pasti kode dibawah ini tepat diatas kode </head> trus di jangan lupa di save.

Kode yang harus di copy

<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 di halaman Edit HTML, centang Expand widget template trus cari kode dibawah ini
<data:post.body/>

kalo dah ketemu, ganti kode <data:post.body/> tersebut dengan semua 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>

kalo sudah beres copy and paste nya, silahkan di simpan dan lihat hasilnya.
Keterangan :

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)

NB :
Buat mempermudah, gunakan Ctrl + F pada saat melakukan pencarian kode di template.

Posted in: Blogger