Candy Apple: March 2013

Assalammualaikum~
Dah lama saya tak update tutorial~ Jadi saya nak ajar korang macam mana nak buat auto read more pada entry di setiap blog. Saya tak tahulah tutorial ni menjadi ke tak pada blogskin.

Code credits to : Adik Faqihah~

Sebenarnya kat entry ada kan icon read more? Kalau nak buat macam tu pada setiap entry leceh sikirt. Jadi saya nak ajar pula buat auto read more. (eh, korang boleh faham ke ayat saya ni? Hehe)

Kelebihan buat auto read more ni... Boleh tahu pembaca blog suka baca entry yang mana dengan mengetahui melalui stats blog~

Okay, let's start~

1) Blogger > Templete > Edit HTML > Tick Expand widget

2) Dengan menggunakan CTRL+F or F3, cari code...

</head>

3) Copy code dibawah ni kemudian pastekan di atas code </head>

<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; jumlah ringkasan perkataan jika tiada gambar dalam entry

summary_img = 250; jumlah ringkasan perkataan jika ada gambar dalam entry

img_thumb_height = 120; ketinggian gambar

img_thumb_width = 120; kelebaran gambar

Nah~ Belum siap lagi.
4) Cari pula code :

<data:post.body/>

5) Jumpa? Kalau dah jumpa, padam code tu dan gantikan dengan code ini :

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<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'>Read More... </a></span>

</b:if>

</b:if>

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

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