Read more sangat berguna, fungsi utamanya adalah bisa menghemat tempat. Saya sendiri sangat menyadari betapa pentingnya Read more. Disini saya akan menjelaskan cara memasang Read More sacara otomatis, ini sangat berbeda dengan Read More yang sebelum-sebelumnya. Sebenarnya Read More secara otomatis ini sudah di ulas oleh pakar bloger kita yaitu o-om.con
Read More yang satu ini mampu menampilkan gambar pertama di
postingan yang anda buat, meskipun gambar
yang kita letakan berada di tengah atau akhir postingan. Dan kita juga bisa mengatur ukuran gambar tersebut. dan tidak hanya cukup di situ, anda juga dapat mengatur jumlah karakter yang anda sukai. Kayanya saya terlalu banyak teori mendingan kita langsung praktek saja. yuk mari.
Pertama-tama anda harus Log in dulu ke blooger dan silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> terlebih dahulu (Untuk mempermudah pencarian tekan Ctrl+F) setelah ketemu copy code di bawah ini, dan simpan tepat di atas code </head>.
Pertama-tama anda harus Log in dulu ke blooger dan silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> terlebih dahulu (Untuk mempermudah pencarian tekan Ctrl+F) setelah ketemu copy code di bawah ini, dan simpan tepat di atas code </head>.
Setelah itu jangan lupa di save, kemudian anda cari lagi code seperti ini 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>
<data:post.body/>
Setelah code di atas anda temukan, ganti semua code di atas dengan code dibawah ini :
Setelah selesai lalu save, dan liat perubahan pada blog anda.<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>
Catatan :
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)
Jangan lupa baca juga di blognya mas o-om.com ya
