Feb 17, 2012

Membuat Auto Readmore / Penyingkat isi posting otomatis

Biasanya, halaman blo anda sangat panjang sampai kebawah. Hal itu disebabkan anda tidak menyingkat isi postingan secara manual. Disini, saya mempunyai script untuk menyingkat postingan anda secara otomatis. Anda hanya tinggal mengetik saja lalu posting. Ikuti Langkah dibawah :

1. Buka Dasbor Blogger Anda
2. Klik Rancangan > klik Edit HTML
3. Cari kode  </head>  , tepat diatasnya ketik kode ini

<!-- auto readmore - d-djamoer.blogspot.com - start -->
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 350 ; //banyak huruf yang ditampilkan jika tidak ada gambar
summary_img = 300 ; //banyak huruf yang ditampilkan jika ada gambar
img_thumb_height = 100; //tinggi gambar yang ditampilkan
img_thumb_width = 120; //lebar gambar yang ditampilkan
</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>
<!-- auto readmore - d-djamoer.blogspot.com - end -->


4. Cari kode  <data:post.body/>  (jika terdapat kode yang sama, cari yang paling atas) , lalu ganti dengan :

<!-- auto readmore start -->
<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;); </script>
<span class='rmlink' style='float:right; '>
<a expr:href='data:post.url'> Baca Selengkapnya... </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
<!-- auto readmore end -->

5. Klik Simpan / Save


Catatan : 
Tulisan yang bewarna merah bisa anda ganti sesuka anda.

Preview : 
Buka blog ini -> D'Djamoer

No comments:

Post a Comment

Dilarang melakukan SPAM dan menggunakan kata-kata yang berkaitan dengan SARA.