Read More dalam dunia blogger sudah tidak asing lagi, yaitu cara untuk memperpendek posting blog pada awal halaman blog sebelum masuk ke posting tersebut. Lebih singkatnya untuk memperpendek posting.
Kali ini saya akan berbagi Trik untuk membuat Auto Read More pada blog. Dengan Auto Read More kita tidak perlu menggunakan cara manual (memasukkan kode pada posting), karena secara otomatis posting akan terpotong dan gambar yang ada pada posting akan berada pada sisi kiri (image thumbnail). Lebih efektif bukan... ^^
Masuk ke Dasbor Sobat kemudian lanjut ke Rancangan > Edit HTML.
Cari kode ini </head>, kemudian copy paste kode di bawah ini. Letakkan di atas kode </head>, dan simpan terlebih dahulu.
Copy script kode di bawah 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 dalam Edit HTML, dan centang "Expand widget template".
Kemudian cari kode ini <data:post.body/> , dan ganti dengan tersebut dengan script kode dibawah ini.
Ubah kode <data:post.body/> 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 == "item"'><data:post.body/></b:if>
Simpan perubahan tersebut.
Note :
var thumbnail_mode = "float"; (letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (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)
Sebelum menggunakan Auto Read More, sebaiknya kembalikan terlebih dahulu kode Read More versi lama Sobat (jika sudah menggunakan).
sumber script kode : o-om.com
