- Login dulu di akun blogger sobat
- Dari Design, klik Edit HTML dan tandai Expand Widget Template
- Back Up terlebih dahulu template sobat.
- Cari kode </head>
- Tambahkan kode berikut Setelah atau di bawah kode </head>
Read more at http://lenterablogger.blogspot.com/2012/04/cara-buat-auto-read-more.html#qkKJYGzXvehR66Qp.99
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script End -->
- Setelah itu, cari kode <data:post.body/>
- Ganti kode <data:post.body/> dengan kode berikut :
<!-- Auto read more Start -->
<!-- http:lenterablogger.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
- Klik Preview, kalau sudah berhasil klik Save
Tambahan :
- summary_img adalah jumlah karakter yang akan ditampilkan dalam penggalan dengan thumbnail.
- summary_noimg adalah jumlah karakter yang akan ditampilkan dalam penggalan tanpa thumbnail
- img_thumb_height dan img_thumb_width adalah ukuran tinggi dan lebar gambar, Sobat blogger bisa menyesuaikan angka tersebut.
- Kata "Read more" bisa di ganti dengan kata yang sobat blogger inginkan misalnya : Baca Selengkapnya, Lebih Lengkap, Baca Lagi, Selengkapnya, dll.
Kalau postingan atau artikel ini bermamfaat buat sobat blogger, jangan lupa tinggalkan pesan atau komentar sobat pada kolom komentar di bawah ini.
Read more at http://lenterablogger.blogspot.com/2012/04/cara-buat-auto-read-more.html#qkKJYGzXvehR66Qp.99
0 Comment to " "
Posting Komentar