Cara mempersingkat postingan blog dengan Readmore

Hallo sob...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.

Kalo bahasa Indonesianya, Readmore ini juga berarti Baca selengkapnya ataupun sejenisnya. Jika belum memilikinya sangat disarankan untuk menggunakannya. Selain membuat blog menjadi lebih tertata rapi, para pembaca juga dapat melihat ulasan singkat tentang postingan yang dibuat sehingga sangat bagus untuk diterpkan pada blog.Contoh Readmore dapat sobat lihat pada blog ini.

Dari pada penasaran mending langsung aja, Ikuti Langkah-langkah [Tutorial] Cara mempersingkat postingan blog dengan Readmore :

1. Login ke account blogger sobat.

2. Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

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

3. Cari Kode kode </head>
4. Lalu copy kode dibawah ini dan pastekan tepat diatas 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 :

• Kode var thumbnail_mode = "float" ; diartikan bahwa readmore sobat 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. Setelah itu, cari kode <data:post.body/> dan gantikan kode <data:post.body/> dengan kode dibawah ini:

<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:

Sobat juga dapat menggantikan tulisan Readmore dengan tulisan lain seperti "Baca selengkapnya" .

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

Selamat mencoba-----------