Cara Membuat Auto Read More

Read More biasa digunakan untuk memotong kalimat pada halaman web anda dengan beberapa jumlah karakter tertentu, sehingga akan menghemat tampilan berita pada halaman web anda. jadi, apabila Read More (Baca selanjutnya) di klik maka isi berita selengkapnya akan tampil pada halaman berikutnya.

Disini minak akan memberikan cara membuat Read More yang minak posting dari Buka Rahasia Blogspot. Langkah-langkahnya adalah sebagai berikut :

1. Login ke Blog anda, kemudian Lihat Blog > Design/Rancangan > Template > Edit HTML. Centang 'Expand Widget Templates'.
2. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<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>

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkanimg_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

 <!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->

Kostumisasi:

Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

                                  <img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar. 

Demikian, untuk lebih jelasnya silahkan anda link ke Buka-Rahasia Blogspot Ucapkan terimakasih untuk buka rahasia blogspot