Cara Mempersingkat Postingan Blog dengan Readmore

Hay sobat apa sih  gunanya Readmore?
Mungkin sobat bertanya-tanya apa seh itu Readmore, Sedikit menjelaskan Readmore berguna untuk mempersingkat isi postingan blog yang bertujuan untuk memberikan kenyaman dalam membaca bagi para reader. Readmore akan menampilkan sedikit bagian dari isi postingan dan akan menyembunyikan isi postingan lainnya. Nantinya jika para pembaca berminat untuk membaca selengkapnya maka hanya dengan mengklik aja, Tampilan keseluruhan postingan akan muncul.

Langsung saja deh kita hajar (hehehe) dan langakah-langkahnya sebagai berikut:

1. Login ke account blogger kamu.
2. Pilih Tata Letak --> Edit HTML --> centang "Expand

Tapi sedikit tips ni Sobat sebelum melakukan edit template, sebaiknya simpan/backup 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.

3. Kemudian cari kode </head>
(Untuk mempermudah pencarian, Gunakan CTRL+F pada keyboard)

4. Setelah ketemu dengan kodenya tadi langsung saja sobat masukan kode dibawah ini dan taruh diatas/sebelum 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>

Keterangan:

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

5. Kemudian langkah selanjutnya, cari kode seperti ini

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

6. Setelah ketemu kemudian gantikan kode tersebut dengan kode berikut ini sobat:

<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Readmore »» <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

 Catatan:

• Ganti kode yang berwarna Hijau dengan letak readmore yang sobat inginkan left (kiri) atau right (kanan).
• Kalau perlu ganti Readmore dengan kata favorit sobat.
• Hapus kode <data:post.title/>, jika sobat tidak menginginkan readmore diikuti dengan judul posting.

7. Lihatlah PRATINJAU terlebih dahulu, jika sudah tidak terdapat kesalahan barulah sobat bisa menyimpan template dengan mengklik SAVE.

                          ------Selesai sobat,selamat mencoba------