Read more otomatis di blogger

Terkadang artikle yang kita buat terlalu panjang untuk di tampilkan pada halaman utama. Maka dari itu Kita membutuhkan fungsi read more. Dengan adanya fungsi ini maka artikle kita akan di bagi atau tidak di tampilkan sepenuhnya, dan pada saat link read more diklik, maka artikle akan tampil sepenuhnya.

Namun secara setandar blogger tidak menyediakan fasilitas ini. Akan tetapi Kita dapat menanamkan fungsi read more otomatis tersebut kedalam blog kita.

Adapun Langkah-langkahnya sebagai berikut :

1. Pastikan kita telah mengaktifkan halaman edit HTML.
2. Setelah itu kita beri tanda centeng di Expend Template Widget
3. Kemudian gunakan fasilitas Find untuk mencari kode </head>
4. Selanjutnya Letakkan Kursor diatas kode </head>
5. Kemudian Paste kode berikut 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. Simpan dahulu pekerjaan kita tadi.
6. Masih pada Edit Html, centeng di Expend Template Widget kembali.
7. Cari kode seperti ini <data:post.body/>
8. Kemudian ganti dengan kode di bawah 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>

8. Simpan pekerjaan kita barusan.



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)

Posting yang berkaitan