Tambah Read More Button

Contoh Read More Button di dalam kotak merah

Button Read More kegunaannya untuk memendekkan entri untuk meringankan Home Blog. Lagi satu kelebihan Read More adalah akan meningkatkan rating view page entri. Kalau tak cuba rugi tau ^_^.

1. Sign in akaun blogger

2. Dashboard > Design > Layout > Edit HTML > Expand Widget Templates. (Untuk langkah berjaga-jaga tolong backup tamplate dahulu ye)

3. Tekan Ctrl+ F paste kod </head> dan tekan enter

4. Kemudian Copy kod di bawah ini dan paste kan di atas kod </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 350;
summary_img = 450;
img_thumb_height = 140;
img_thumb_width = 140;
</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>

5. Tekan sekali lagi Ctrl+ F.paste kan kod <data:post.body/>

6.Copy kod di bawah ini dan gantikan kod di step nombor 5 menjadi kod seperti di bawah:

<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:right'><a expr:href='data:post.url'><img src='URL Button Korang Di Sini'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

** Masukkan URL Button korang di text warna merah

7. Save!

~Contoh Url image Button seperti di bawah, korang hanya perlu Right Click mouse korang dan copy kemudian masukkan URL di step nombor 6.