Mar 28, 2013

Tutorial : Auto read more untuk setiap entry

Tumblr_mk6e8uhjeu1s99firo1_500_large
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 != &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'>Read More... </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>


6) Perkataan Read More... tu boleh digantikan dengan apa-apa ayat, atau nak guna gambar pun boleh~ Gantikan perkataan tu dengan code ini :

<img alt='Read More...' src='URL GAMBAR ANDA'/>

Antara freebies gambar yang boleh korang guna:

http://img810.imageshack.us/img810/9164/readmorerainbow.png

http://img823.imageshack.us/img823/7318/readmorepinkblack.png

http://img28.imageshack.us/img28/5989/readmorepinkwhite.png

http://img40.imageshack.us/img40/3784/43423111.png

http://img850.imageshack.us/img850/7259/93789459.png



Freebies by Adik Faqihah~
Okay~ Sampai disini sahaja~ :D Kalau code ini tak menjadi atau korang ada problem, just komen ya ^__^

Yeah~ He had a pretty accident, that's why he got a 'pretty' face. You mad, Ejo Jo? Harhar :p