Dengan
adanya readmore otomatis, homepage blog kita akan terlihat rapi dengan
ketentuan tinggi dan lebar yang bisa di atur dengan mudah, juga menampilkan
thumbnails gambar di sampingnya.
Sebelumnya
zona-klik minta maaf jika cara penyampaian di artikel ini kurang dipahami dan
dimengerti oleh sobat blogger, karena itulah kemampuan dan pengetahuan
zona-klik membahas cara membuat readmore otomatis di blogspot.
Tanpa
perlu panjang lebar bercerita, alangkah baiknya langsung ke TKP,
cekidot.........
PERTAMA, silakan
masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan
tanda ceklis pada bacaan "Expand Widget Template"
atau lihat gambar di bawah ini :
cari
kode </head> kemudian masukkan script di bawah ini persis diatas kode
tersebut.
<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>
KEDUA, cari
kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p>
ganti
kode tersebut 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:right;padding-top:20px;'>
<a
expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if
cond='data:blog.pageType ==
"item"'><data:post.body/></b:if>
Keterangan : tulisan
yang berwarna merah adalah yang bisa anda ganti.
==> summary_noimg
= 250; = tinggi artikel terpenggal tanpa image
==> summary_img
= 250; = tinggi artikel terpenggal dengan image
==> Readmore bisa
anda ganti dengan Baca Selengkapnya, full read dll...
KETIGA,
klik save template
Untuk
melihat hasilnya coba buka halaman home page blog sobat,
jreng...jreng...jreng...readmore otomatis telah tampil dan blog sobat terlihat
lebih menarik sehingga menimbulkan daya tarik tersendiri bagi pengunjung.
