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 Anhvovisit 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 :
Nah~ Belum siap lagi.
4) Cari pula code :
5) Jumpa? Kalau dah jumpa, padam code tu dan gantikan dengan code ini :
6) Perkataan Read More... tu boleh digantikan dengan apa-apa ayat, atau nak guna gambar pun boleh~ Gantikan perkataan tu dengan code ini :
Antara freebies gambar yang boleh korang guna:
Freebies by Adik Faqihah~
Okay~ Sampai disini sahaja~ :D Kalau code ini tak menjadi atau korang ada problem, just komen ya ^__^
summary_noimg = 250; jumlah ringkasan perkataan jika tiada gambar dalam entrysummary_img = 250; jumlah ringkasan perkataan jika ada gambar dalam entryimg_thumb_height = 120; ketinggian gambarimg_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>
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
1 comment:
yea jadi2...:)
Post a Comment