Cara Mempersingkat Postingan Blog dengan Readmore

Salam sobat blogger....
kali ini saya akan memberi tips /cara untuk membuat tampilan blog anda menjadi lebih menarik yaitu Readmore pada postingan blog.
langsung saja kita bahas cara tsb, malas kalau mukadimah tu panjang-panjang kan.. hehehe

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.

1. Seperti biasa, Log in dahulu kepada akun blogger sobat masing-masing
2. Kemudian masuk ke Dashbor => Template => EDIT HTML => Lanjutkan

3. Kemudian cari kode </head>

(Untuk mempermudah pencarian, Gunakan CTRL+F pada keyboard)

Lalu copy  kode dibawah ini dan pastekan tepat diatas atau sebelum kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width= 120; </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(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 :

var thumbnail_mode = "float" => Letak thumbnail berada di “float” kiri atau jika sobat tidak menginginkan demikian silahkan ganti dengan “no-float”.

summary_noimg = 250;  => Jumlah karakter yang akan ditampilkan di posting tanpa menampilkan gambar postingan.

summary_img = 250;   =>  Jumlah karakter yang akan ditampilkan di posting dengan menampikan gambar postingan.

img_thumb_height = 120; => Ukuran tinggi gambar dalam satuan pixel.

img_thumb_width = 120;  => Ukuran Lebar  gambar dalam satuan pixel.

4. Setelah itu, cari kode <data:post.body/> dan gantikan kode <data:post.body/> dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

=============================================

Keterangan :

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

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