tutorial readmore button

ada rasa nak buat READMORE BUTTON macam ni??? tapi button readmore ni trex design sendiri la.. tutorial bawah ni menghasilkan readmore button yang biasa sahaja... next time trex ajar tukar readmore button sesuka hati.. boleh?? hehehehhe...


1) DASHBOARD >> DESIGN >> EDIT HTML 

2) download full template untuk back up yea

3) klik expand widget templates

4) Ctrl F pastu cari code </head> refer arrow dalam gambar bawah ni.... 


5) copy code bawah ni dan paste sebelum atau selepas code </head> 

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 350;
summary_img = 450;
img_thumb_height = 140;
img_thumb_width = 140;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

6) Ctrl F pastu cari code <data:post.body/> refer arrow dalam gambar bawah ni...



7) lepas dah jumpa code tu.. gantikan code <data:post.body/> dengan code kat bawah ni...

<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:right'><a expr:href='data:post.url'><img src='http://1.bp.blogspot.com/_LZtXSNcp76A/SxuOVTvCKgI/AAAAAAAAAr8/rFJNAYKSomY/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


8) PREVIEW.. kalau okay... SAVE


selamat mencuba... tutorial credit to... maribinablog...

7 comments

  1. misztrex : gud lah!!! ai laik dis...ai pun ada buat tutorial gak...koh koh koh

    p/s : Sila lah BW ye...tengkiu...
    1.New Entry "TUTORIAL Part 1 : NEW ENTRY di comment box"
    2.New Entry "~DULU & KINI~"

    ReplyDelete
  2. salam

    menarik tutor ni,,tp belum bersedia nak pakai,sbb kita punya line low...

    ReplyDelete
  3. arghhh.....dah mula pening kepala..xnak buat buat boleh kan. huhuhu

    ReplyDelete
  4. trex..kak pinky dtg dr blog maera..
    nak tnya..kalau nak suh baut kan banner..awak charge bape ye..

    nnt komen kat new entry akak bgtau rega =)

    tQ!

    ReplyDelete
  5. ok tenkiu..tapi bila dh free nnt..roger akak ye.. =)

    eppy blogging..

    ReplyDelete
  6. thanks for u tutorial....sgt berguna...:D

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...