Panduan Menciptakan Read More (Baca Selengkapnya) Pada Blogger

Bagaimana memotong postingan di blogspot dengan kata “baca selengkapnya..” atau “read more..” sehingga yang tampil di halaman depan hanya separuh postingan dan postingan lengkap akan muncul apabila link “baca selengkapnya..” atau “read more..” di klik.

Berikut Langkah-langkah menciptakan read more / baca selengkapnya pada blogger:

1. Klik sajian ibarat ini

 

2. Klik sajian / goresan pena Template

 

3. Klik sajian Edit HTML

 

 

4. Klik tulisan/menu Lanjutkan

5. Beri centang pada Expand Template Widget

Sebagai jaga-jaga jangan lupa backup dahulu template yang kau gunakan.

6.  Letakkan Script Auto Read More di atas isyarat </head> (agar lebih gampang menemukan isyarat tersebut dengan cara dengan CTRL+F)

 

7. Berikut Script Read More yang harus di letakkan tersebut

<script type='text/javascript'>

var thumbnail_mode = "float" ;

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>

Keterangan:

summary_noimg = 250 yaitu jumlah ringkasan goresan pena bila tidak ada gambarnya
summary_img = 250 yaitu jumlah ringkasan goresan pena bila ada gambarnya
img_thumb_height = 120 yaitu tinggi gambar
img_thumb_width = 120 yaitu lebar gambar

8.  Temukan isyarat <data:post.body/> lalu ganti isyarat tersebut dengan isyarat di bawah ini:

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

<b:if cond='data:blog.pageType != &quot;static_page&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>

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

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

9.  Sekarang coba preview dulu hasilnya, bila sudah ada goresan pena Baca Selengkapnya... dan tulisannya sudah di tampilakan sebagian saja itu artinya anda sudah berhasil menciptakan read more sendiri.

SELAMAT MENCOBA

Sumber: DISINI