Cara Membuat Read More di Blog

Cara Membuat Read More di Blog

Ok..isi posting kali ini membahas tentang Cara Membuat Read More di Blog tanpa harus menanamkan kode secara manual ke dalam halaman postingan, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode.

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan yang biasa  disebut dengan fasilitas image thumbnail. 

 

Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.

Jika anda merasa tertarik dengan posting Cara Membuat Read More di Blog ini silahkan ikuti langkah-langkahnya :

Pertama, langsung masuk ke halaman Edit HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Jika sudah dimasukkan kodenya, ingat jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
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 cari kode seperti dibawah ini :

<data:post.body/>

Kalo sudah dapat, ganti kode <data:post.body/> 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>

Simpan dan coba lihat hasilnya....!!!

Ket :

1. var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
2. summary_noimg = 450; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
3. summary_img = 450; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
4. img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
5. img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

EnaL Rhay SyahRinggan Next..>>

Artikel Terkait