Cara Membuat READMORE Otomatis di Blog
Kali ini saya akan berbagi ilmu kepada kamu bagaimana cara membuat readmore otomatis (auto read more) di blogspot. Mungkin telah banyak yang membahas cara ini di blognya masing-masing, tetapi tidak ada salahnya kan kalo saya memposting artikel ini.
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.
SS :
Sebelumnya saya minta maaf kalau cara penyampaian saya di artikel ini sulit dipahami dan di mengerti oleh sobat blogger, karena itulah kemampuan dan pengetahuan saya membahas cara membuat readmore otomatis di blogspot. Tanpa perlu panjang lebar bercakap cakap, alangkah baiknya langsung saja, cekidot.........
1. Silahkan anda masuk ke account 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>
2. 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>f
<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.
3. Klik save template
Untuk melihat hasilnya coba buka halaman home page blog kamu, eng ... ing ... eng ... readmore otomatis telah tampil di blog kamu dan terlihat lebih
menarik sehingga menimbulkan daya tarik tersendiri bagi pengunjung.
Sekian informasi yang dapat saya berikan kurang lebihnya saya mohon maaf. Semoga Bermanfaat ^_^