December 2, 2013

Cara Membuat Auto Read More Blogspot Otomatis V2

Auto-read-more
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>

<!--Auto Read More-->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 = &quot;yes&quot;; //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>
<!--Auto Read More Akhir-->

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 :

<!-- Auto read more -->
<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>
<table border='0'><tbody><tr><td>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
   </td></tr></tbody></table>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

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

Related Posts

Cara Membuat Auto Read More Blogspot Otomatis V2
4/ 5
Oleh :

12 comments

Wah mantab isinya bagus-bagus... ijin sedot y ilmunya...

Mau nyoba kang tp takut nambah berat

Jadi lebih rapi ya gan Page Home kita :)

dengan menggunakan read more, tampilan home jadi lebih ringan loadingnya.

Tujuannya seperti itu Om.

Benar dan lebih rapi, kita tidak perlu menggunakan Jump Break bawaan blog lagi.

informatif sangat ;)

Terima kasih banyak ilmunya dan salam kenal dari Direktori Blogger :)

Salam kenal juga dari kami teman