Kamis, 25 Oktober 2012

Membuat Read More Otomatis Blogger

Berikut ini adalah cara membuat Read More Otomatis Blogger. Yang dimaksud dengan Read More Otomatis di sini adalah Read More yang otomatis dibuat tanpa campur tangan kita saat membuat artikel / posting di blog, bahkan kita tidak perlu repot-repot membuat Read More untuk artikel / postingan yang telah lama kita buat karena dengan cara ini semua artikel di blog kita akan otomatis memiliki Read More.
Baiklah, berikut ini adalah Cara membuat Read More Otomatis yang dimaksudkan.
  1. Masuklah ke Blogger dan pergi ke Edit HTML kemudian centang Expand Widget Template
  2. Backup Template saat ini untuk berjaga-jaga jika terjadi error atau kesalahan saat membuat Read More Otomatis ini. 
  3. Cari kode </head> kemudian taruhlah kode berikut ini di bawah kode </head> tersebut.
  4. <!-- Read More Otomatis script -http://azinsblog.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>
    <!-- Read More Otomatis script -http://azinsblog.blogspot.com -End-->
    Catatan : Kode yang berwarna biru dapat diganti sesuai keinginan kita.
  5. Cari dan gantilah kode <data:post.body/> dengan kode di bawah
  6. <!-- Read More Otomatis script -http://azinsblog.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>
    <!-- Read More Otomatis script -http://azinsblog.blogspot.com -End-->
  7. Simpan template kemudian lihat hasilnya.
Sekian tutorial / cara Membuat atau Memasang Read More Otomatis pada Blog Blogger.

Referensi : http://arisuchiha.blogspot.com/2012/07/cara-memasang-read-more-otomatis-di.html