Cara menambahkan fitur auto read more disertai thumbnail blogger

Fungsi baca lebih lanjut ini digunakan untuk memotong artikel kita di homepage, posting akan muncul sepenuhnya ketika kita klik link Read More. Fasilitas Read More ada dua yaitu manual dan otomatis. Tulisan dipotong secara otomatis dan jika kita menyisipkan gambar postingan, akan tampak thumbnail.
Caranya, kita hanya memasukkan beberapa kode javascript kemudian di aplikasikan ke body. Untuk lebih jelasnya ikuti langkah - langkah berikut ini:

  1. Pergi ke "Design" klik "Edit HTML"
  2. Centang "Expand Widget Templates"
  3. Cari kode ini
    <data:post.body/>
  4. Ganti dengan kode ini
  5. <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <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'>read more</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>
  6. Cari kode </head> kemudian copy paste kode dibawah tepat diatasnya
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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(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>
Dari berbagai sumber.

Anda baru saja membaca artikel yang berkategori Blogger / other dengan judul Cara menambahkan fitur auto read more disertai thumbnail blogger. Anda bisa bookmark halaman ini dengan URL http://bisidamuda.blogspot.com/2012/04/cara-menambahkan-fitur-auto-read-more.html. Terima kasih!
Ditulis oleh: Bisidamu

Belum ada komentar untuk "Cara menambahkan fitur auto read more disertai thumbnail blogger"

Post a Comment