Membuat Read More Otomatis

Read more merupakan salah satu cara agar kita dapat membuat variasi posting dengan tidak menampilkan secara keseluruhan tapi hanya sebagian sehingga bisa lebih hemat tempat dan menarik.

Berikut langkah yang harus dilakukan :

• Login ke account blogger kamu.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Login ke blogger.com
• Klik Tata Letak --> Edit HTML.
• Copy kode di bawah ini dan paste di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>

Catatan :

1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".
2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.

Cari kembali kode seperti di bawah ini.

<data:post.body/>

atau

<p><data:post.body/></p>

Kalau sudah ketemu, ganti kode tersebut dengan kode berikut :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'><img src='http://i864.photobucket.com/albums/ab206/kibagus/animation/th_Set-02d-june.gif'/></a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :

• Ganti kode yang berwarna merah dengan alamat IMAGE kamu bila kamu ingin pakai punya kamu sendiri..

• Jangan lupa disimpan.

Selamat mencoba.............