Membuat Auto Read More di Blog

   Membuat tampilan blog lebih menarik adalah suatu hal yang sering dilakukan oleh para blogger. Dengan tampilan lebih menarik dan Simple memungkinkan untuk memperbanyak visitor untuk berkunjung. Terutama unuk para blogger baru pasti hal yang pertama dikerjakan yaitu mendesain blog. Kali ini kita akan bahas salah satu yang dapat membuat tampilan blog lebih menarik yaitu dengan memasukan Auto Read More atau Baca Selengkapnya, pada halaman depan kita.

  Fungsi dari Auto Read More / Baca Selengkapnya, disamping untuk memberi tampilan lebih menarik, bisa juga untuk memotong sebagian postingan panjang yang tampil di HomePage blog menjadi lebih simple atau bisa disebut hanya penggalan kata-kata seperti Judul, 1 Gambar awal bila tersedia serta penggalan deskripsi saja yang ditampilkan.

  Auto Read More / Baca Selengkapnya ini dapat di setting sedemikian rupa sesuai kebutuhan.
Ini adalah langkah-langkah untuk membuat Auto Read More / Baca Selengkapnya...

1. Login ke Blogger.com
2. Klik Template, untuk berjaga bila terjadi kesalahan Backup template terlebih dulu dengan mengklik Cadangkan/Pulihkan lalu Unduh
3. Klik Edit HTML
4. Klik sembarang di tempat yang banyak codingnya.
5. Tekan Ctrl+F untuk menampilkan kotak pencarian
6. Cari code </head> di kotak pencarian
7. Masukan kode berikut di atas </head/>

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

Note : Teks Warna Biru untuk mengatur banyaknya kutipan dari artikel.
           Teks Warna Merah adalah Pengaturan Lebar dan tinggi gambar

8. Kemudian cari lagi code <data:post.body/>
    jumlah kode tersebut biasanya ada 2 buah. cari saja yang kedua
9. Hapus dan ganti code <data:post.body/> dengan code dibawah ini

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

Note : Teks Warna Ungu bisa di udah sesuai keingainan.

10. Save dan lihatlah hasilnya..
Selamat Mencoba, jika gagal coba terus menerus sampai bisa dan menemukan letak salahnya dimana dan segera mungkin perbaiki..