Membuat Readmore Menjadi Rata Kiri Kanan (Justify)

Oya, pada artikel saia yg membuat auto readmore dengan thumbails apabila telah kita simpan dan buka makan posisi hanya akan rata kiri. Bagi anda yg terbiasa menggunakan rata kiri pasti akan biasa-biasa aja, tapi berbeda apabila anda adalah tipe orang yg seneng menggunakan rata kiri dan kanan. Ok, pada artikel kali ini saia akan menjelaskan tentang cara membuat agar auto readmore yg kita buat tadi bisa menjadi rata kiri kanan (justify). 

Berikut ini langkah-langkahnya :

[1] Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

[2] Cari script dibawah ini, cari dengan menggunakan ctrl+f :

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

[3] 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'>

[4] Preview terlebih dahulu, jika sudah beres, kemudian save.

Membuat Auto Read More With Thumbnails

Script auto readmore blogspot dengan thumbnails ini adalah script untuk membuat auto readmore pada template yg belum disedikannya auto readmore. Dengan penggunaan auto readmore akan membuat blog sedikit lebih ringkas, rapi dan memudahkan untuk pembaca blog memahami isi blog kita.

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
2. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://point-428.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>
<!-- Auto read more script -http://point-428.blogspot.com- End -->

Yang berwarna biru adalah jumlah dan ukuran tampilan, berikut penjelasannya :

• 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.

3.  Kemudian cari <data:post.body/> (gunakan Ctrl+F), lalu hapus dan GANTI dengan:

<!-- Auto read more -http://point-428.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>
<!-- Auto read more -http://point428.blogspot.com- End -->

Note : Ganti Read More >> dengan kata-kata yang anda diinginkan.

4. Tinggal kalian klik simpan deh dan rasakan perbedaannya.. :D