Cara Membuat Read More

Read More...sering kita melihat kata-kata tersebut di setiap postingan-postingan yang ada pada halaman depan blog. Artikel-artikel yang ditukis panjang akan ditampilkan sebagian ketikan kita menggunakan tanda read more ini. Dengan menggunakan read more ini maka, mempermudah bagi pembaca untuk melihat sekilas setiap postingan yang telah kita tampilkan di halaman depan. Bila tidak menggunakan read more ini maka, postingan yang akan ditampilkan di halaman depan akan terlihat panjang dan mungkin akan membutuhkan waktu yang banyak bagi pembaca untuk melihat postingan secara keseluruhan di halaman depan di karenakan yang akan ditampilkan adalah satu artikel utuh untuk setiap judulnya.


Terus, bagaimanakah cara menampilkan tulisan "read more" ataupun "Baca Selengkapnya" pada postingan yang ada pada halaman muka blog kita? mungkin banyak para blogger-blogger newbie yang bertanya-tanya tentang cara bagaimana membuatnya. Untuk itu saya akan memberi sedikit tips cara untuk menyisipkan read more ke dalam postingan kita.


Untuk blog yang bersubdomain wordpress.com akan lebih mudah menyisipkan read more dikarenakan sudah dilengkapi dengan "button more" di dalam text editornya. Tetapi, jika kita menggunakan editor blogger.com maka kita tidak akan melihat button tersebut. Oleh karena itu, diperlukan cara menggunakan read more tersebut yaitu dengan cara menyisipkan script-script HTML ke dalam template-nya.


Berikut cara menyisipkan script read more pada blogger:

1. Login ke dalam Blogger kita
2. Selanjutnya, klik design pada dashboard
3. Pada menu design, kita klik Edit HTML. Setelah itu centang Expand Widget Templates






4. Selanjutnya, kita sisipkan script HTML di bawah ini ke atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
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>

     5.  Setelah disisipkan, cari kode <data:post.body/> kemudian ganti dengan script di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya... </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Setelah di preview hasilnya, maka secara otomatis artikel akan terlihat ditampilkan sebagian.

yang artinya, script read more yang kita sisipkan berhasil.

Semoga Bermanfaat....