Sukses membuat auto readmore atau baca selengkapnya

Kemaren saya sempat dipusingkan sewaktu membuat posting, sudah capek-capek mengetik setelah dipubish eh.. jadi berantakan tampilan home nya. Lalu kuedit lagi postingan tersebut karena read more atau dalam bahasa kita disebut Baca selengkapnya. Tentu hal ini sangat menyita waktu harus tau dulu di bagian mana paragraf itu hendak dipenggal.

Memang sih dalam blogspot sudah disediakan preview namun sering kali tampilanya berbeda dengan tampilan sesungguhnya. Apalagi bila dalam postingan disertakan readmore, pasti ketika dipreview yang muncul adalah tampilan posting satu halam penuh, sedangkan readmorenya tidak nampak.

Dalam hati terbesit pemikiran apakah ada cara lain agar ketika membuat artikel kita tidak perlu lagi memasang readmore.? Ternyata jawabannya ada, yaitu dengan jalan meletakkan script auto readmore ke dalam template. Sehingga secara otomatis paragraf akan terpenggal sendiri kalimatnya apabila telah menempati ruang posting yang telah kita seting lebar dan tingginya.

Banyak veri auto readmore tapi dari beberapa sumber yang pernah kubaca dan kucoba, script inilah yang paling cocok diterapkan ke dalam template blogku.

Karena keberhasilan tersebut maka patut disyukuri bagi saya untuk sharing dengan anda di blog ini. Mudah-mudahan dapat berguna bagi kita semua.

Auto readmore dapat dipasang melalui langkah berikut ini :
Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

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

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

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

Pengaturan lainnya :
Ganti Read More >> dengan kata-kata yang diinginkan misalnya “Baca selengkapnya”.
Apabila menginginkan kalimatnya rata kanan dan kiri, 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;'
sehingga menjadi:

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

Semoga berguna, and happy blogging.