Membuat readmore atau baca selanjutnya pada postingan blog, dapat memperindah tampilan blog,
ada yang membuatnya dengan cara manual dengan mengklik tombol insert jump break yang ada pada tab compose pada saat kita hendak posting, atau bisa dengan cara menuliskan kode ini <!--more-->, pada tab edit HTML. nah dengan cara ini mungkin sedikit ribet karena banyaknya karakter yang tampil tidak bisa ditentukan dengan cara ini bisa membuat semuanya otomatis dengan bisa mengatur berapa banyak jumlah karakter postingan.
Langsung aja saya kasih tau cara membuat readmore otomatis
Pertama, Login ke blogger anda dan masuk kerancangan kemudian pilih edit html dan cari kode ini : </head> kemudian copy dan paste script dibawah ini tepat dibawah kode </head> tadi, supaya lebih gampang nyarinya, pake aja ctrl+F / F3
<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/>
Sama kaya yang pertama pake juga tombol ctrl+F / F3
Sama kaya yang pertama pake juga tombol ctrl+F / F3
Kalo sudah ketemu, 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 == "item"'><data:post.body/></b:if>
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)
Dan Kata READ MORE bisa diganti dengan Selengkapnya/Baca selengkapnya Sesuai selera anda...
