membuat auto readmore

              Postingan yang panjang ditambah ada banyak posting dalam satu halaman membuat Homepage atau halaman menu jadi terlihat tidak rapi. agar terlihat lebih simpel anda perlu mencoba membuat fitur auto readmore.

                  

                  Readmore bisa dibuat dengan cara manual yaitu dengan melakukan "insert jump break" setiap kali kita akan posting dan beberapa pengaturan. namun jika tidak mau repot gunakan saja auto readmore. posting seperti biasa dan ketika postingan anda publish Artikel sudah ada fitur readmorenya. banyaknya karakter pada tampilan readmore dapat kita atur serta ukuran gambar artikelnya. untuk membuatnya ikuti langkah-langkah berikut ini: 

1. Login blog > Templates >edit Html
2. Cari kode <data:post.body/>  
3. Ganti dengan kode dibawah ini:

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

     4. Jika belum menunjukkan hasil, ulangi langkah 2 dan 3 namun dengan <data:post.body/>   yang
          lainnnya. biasanya terdapat 3 buah dalam blog.
     5. jika ingin mengubah tulisan readmore dengan gambar, ubahlah  Read More &#187;
      
<a class='more' expr:href='data:post.url'><img border='0' src='alamat URL gambar'/></a>
    
Ubahlah alamat URL gambar dengan Url gambar yang diinginkan.

    6.  Lanjutkan dengan kustomisasi readmore kita.
    7.   cari kode </head> dan taruh kode berikut tepat dibawahnya.

.

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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>

    8.  Ubahlah angka yang saya warnai merah untuk kostumisasi banyaknya karakter derta resolusi gambar pada mode Readmore.


"lebih baik gagal daripada tidak sama sekali, karena  gagal kita jadi lebih baik" .(*Msb)