Cara Membuat Auto Read More Blogspot Otomatis V2

Posted by : Unknown - Posted On : 12/02/2013 with : 12 Comments

Kalau kita cari di Google, banyak tutorial membuat Auto Read More Otomatis Di Blog, tapi entah kenapa cukup banyak juga para teman blogger yang comment untuk dibuatkan tutorial membuat Auto Read More. Untuk memenuhi permintaan teman-teman berikut ini kami buat tutorialnya.

Artikel ini modifikasi dari Cara Membuat Read More Otomatis Pada Blog, dimana Auto Read More Blogspot Otomatis V2 ini tidak membuat Halaman Statis (Static Page) di Blogspot Error.

Auto Read More Blogspot Otomatis V2 ini juga dapat di modifikasi sesuai dengan keinginan sipemilik blog, mau di besarkan untuk ukuran gambarnya ataupun ditambah kata kutipannya.

Berikut tahapan Cara Membuat Auto Read More Blogspot Otomatis V2 :

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga-jaga kalau ada kesalahan

3. Klik Edit HTML.

4. Dan cari kode </head>

5. Tempatkan script dibawah ini diatas </head>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style scoped='scoped'>
.post-body {text-align:justify}
.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;}
.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px; }
.read-more a:hover{text-decoration:none;background:#666;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 170;
img_thumb_width = 250;
</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>
</b:if>
</b:if>

Keterangan : Warna merah untuk mengatur banyaknya kutipan huruf dari artikel. Warna Biru adalah Pengaturan Lebar dan tinggi gambar

6. Kemudian cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

7. Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web, biasanya yang kedua
8. Hapus Kode <data:post.body/> atau <p><data:post.body/></p> yang ke-2 dan Ganti dengan yang dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<table border='0'><tbody><tr><td>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya »</a>
      </div>
   </td></tr></tbody></table>
</b:if>
</b:if>

Keterangan : Baca Selengkapnya bisa diganti bebas sesuai dengan kehendak.

9. Preview terlebih dahulu, kalau bagus Save Template.

Demikian Tutorial Cara Membuat Auto Read More Blogspot Otomatis V2, Semoga Manfaat