Pages

05 Februari 2011

Tutorial READ MORE



Pada hari ini, saya akan menunjukkan cara hendak membuat READ MORE untuk blog anda. Ia akan membantu blog anda memaparkn lebih banyak artikel dengan mudah seperti rajah di atas. 


*peringatan, adalah dinasihatkan supaya anda membuat salinan Download Full Template untuk mengelak kan sebarang kerosakan.




1. Apabila anda sudah Login Bloger, selepas itu masuk kemenu Design dan kemudian pilih Edit HTML. Klik pada kotak "expand widget template" , 


2. Klik Ctrl F, Kemudian cari kod ini,


</head>


Pastekan pada bulatan no.1, 





kemudian copy dan paste kod  dibawah ini tepat di atas kod yang anda cari tadi. seperti bulatan no.2 seperti gambar di atas.


<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>




3. kemudian anda cari kod di bawah ini dengan menggunakan kaedah seperti tadi "ctrl F"


<data:post.body/>


Paste pada bulatan no.1. Bila anda jumpa kod tersebut. Padamkan, dan gantikannya dengan kod dibawah seperti bulatan no.2 di dalam gambar di bawah ini.






<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:left'><a expr:href='data:post.url'>READ MORE- <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>





*READ MORE = Anda boleh menukarnya kepada perkataan yang diingini seperti, Seterusnya, artikel penuh, dan lain-lain.


4.Kemudian klik save 

5. Selesai.



Selamat mencuba   =)

Tiada ulasan:

Catat Ulasan

Sebarang komen dan cadangan adalah digalakkan. Amatlah dihargai andai anda dapat MEnjadi pengikut sy. Terima kasih. ^_^