Assalamualaikum, Salam Sejahtera. :)
Bismillahirrahmanirrahim..
Perbezaan antara "read more biasa" dan "auto read more"
| Conventional read more | Auto read more with thumbnail |
| Uses HTML | Javascript |
| Need to insert code in post. | Post is untouched. |
| Length of each snippet can be customized. | Length can be changed, but it affects all posts. |
| Read More is applied only to posts with the code added. | Read More applied to all posts, no exception. |
| No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post). | The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail. |
| The code loads full post but only shows the snippet. | Only loads the snippet. |
Kali ini nak bagi tutorial read more yang lagi mudah, tak perlu letak coding lain semasa buat post entry, sangat leceh kan? So kali ini ada tutorial yang sangatlah senang lenang. Tak payah nak adjust-adjust coding kat entry box tu. Jom, qihah ajarkan 2 versi. Yang satu Read More bergambar dan satu lagi tidak bergambar iaitu read more perkataan/dalam ayat. Jom-Jom!
1. Sign in Blogspot > Design > Template > Edit HTML
2. Copy dan cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!
</head>
3. Copy code di bawah dan paste di atas code yang korang cari tadi.
<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 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya
img_thumb_height = 120 adalah tinggi gambar
img_thumb_width = 120 adalah lebar gambar
**Tak edit pun tak pe dah, sebab dah adjust terbaik dahh
4. Copy dan cari lagi code di bawah, Ctrl+F sahaja
<data:post.body/>
5. Dah jumpa? Korang padam/delete code tersebut dan gantikan/replace dengan code di bawah.
<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. Kalau korang nak tukar kepada gambar padam perkataan Read More... dan gantikan kepada code di bawah.
<img alt='Read More...' src='URL GAMBAR ANDA'/>
7. Letakkan URL GAMBAR ANDA yang sesuai.
8. Dah Preview, menjadi? Save je. Tak menjadi tu kena ikut step slow-slow dan masih tak menjadi memang widget ni tak sesuai dengan template anda.
URL gambar Read more button untuk korang
http://img823.imageshack.us/img823/7318/readmorepinkblack.png
http://img88.imageshack.us/img88/4597/readmorepurpleblue.png
http://img28.imageshack.us/img28/5989/readmorepinkwhite.png
http://img823.imageshack.us/img823/5470/readmorepink.png
http://img100.imageshack.us/img100/4641/55997688.png
http://img850.imageshack.us/img850/7259/93789459.png
http://img40.imageshack.us/img40/3784/43423111.png
Ni yang simple-simple je. Kalau nak lagi cantik, bolehla design sendiri ^_^
Source
satu dan
dua. thank you and Bye!
