Membuat Auto Read More

Haloo Sohib Blogger semua, masih tetap semangat untuk tetap berkreasi dan memberikan yang terbaik pada  pengunjung Blog Sohib kan…? Kadang ketika Sohib membuat Blog baru atau mengganti template pada Blog, ketika membuka pada bagian homepage posting-posting yang dibuat masih terlihat utuh dan belum terpotong oleh fasilitas READ MORE sehingga menyebabkan Blog terkesan sangat panjang. Hal ini tentunya akan menyebabkan Pengunjung Blog Sohib merasa tidak nyaman karena harus memutar roda mouse terlalu lama untuk melihat posting-posting Sohib yang berada pada halaman depan, untuk itu dibutuhkan fasilitas blog yang bernama READ MORE fungsinya untuk lebih memperpendek panjang halaman muka dan mengoptimalkan tampilan posting terbaru Sohib. Berikut ini Pak De-I berikan trik untuk Sohib tentang cara pembuatan READ MORE untuk Blog Sohib, caranya adalah:

1.    Masuk ke Dshboard Blog Sohib dengan akun Sohib
2.    Pilih Design/Rancangan
3.    Klik pada Edit HTML jangan lupa centang Expant Widget Template pada kotak kecil di sudut kanan atas. Pak Dei-I sarankan agar Sohib Download dulu  atau back up file XML untuk mengantisipasi kalau terjadi kesalahan sohib dapat mengembalikan template pada template sebelumnya.
4.    Cari kode </head> dengan cara tekan Ctrl+F kemudian letakkan scriptdibawah ini tepat dibawah kode </head>

<!-- Auto read more script -http://desainexteriorinterior.blogspot.com- Start -->
<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>
<!-- Auto read more script -http://desainexteriorinterior.blogspot.com- End -->

Huruf yang tercetak dengan warna biru  adalah jumlah dan ukuran tampilan

summary_noimg=jumlah karakter tanpa gambar, 

summary_img=jumlah karakter dengan gambar, 

sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

. 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://desainexteriorinterior.blogspot.com- End -->

Catatan:
Ganti Read More >> sesuai dengan selera Sohib. Sohib juga bisa mengganti tulisan READ MORE dengan gambar caranya ganti tulisan berwarna biru tersebut dengan:
<img border='0' src='url (direct link) gambar readmore'/>
Ganti url (direct link) gambar readmore dengan alamat url dimana Sohib mengupload dan menghosting exteriorgambar.

5. Kalau sudah selesai semua Preview terlebih dahulu, jika sudah beres, kemudian save.

Artikel terkait lainnya: