OMHAX

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.

No comments:

Post a Comment

Iklan Atas Artikel

Popular Posts

Bisidamu

My daily experiences

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Advertising