Cara Membuat Auto ReadMore Blogger V2 + Button

Hallo sob, kali ini saya akan share Cara Membuat Auto ReadMore. Mungkin sudah banyak yang share tutorial ini, tetapi alangkah baiknya jika saya share kembali siapa tau saja ada yang membutuhkannya. Jika sobat ingin memasangnya silahkan Ikuti Tutorial dibawah ini.

Tutorial :

1. Masuk ke Dashboard Blogger → Template → Edit HTML.

2. Jika  sudah diisi oleh Script Auto ReadMore yang lain, hapus terlebih dahulu.

3. Copy & Paste Script berikut tepat dibawah kode </head>

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

Yang berwarna merah 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.

4. Kemudian cari <data:post.body/> dan Ganti dengan Scrip berikut :

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

Customize :
Ganti Read More → dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Contoh:

<a class='more' expr:href='data:post.url'><img border='0' src='http://hostgambar.com/gambar-readmore.png'/></a>

"Save as" kemudian upload sendiri dan ambil url gambarnya. Kalo perlu resize dulu sesuai dengan kebutuhan dan ukuran yang pas.

Gambar Readmore Button Gratis (PNG Transparan)

Cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)?

Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan CTRL + F :

<div expr:id='&quot;summary&quot; + data:post.id'>

Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

----------------
5. Preview terlebih dahulu, jika sudah beres, kemudian save.

Done !!