Monday, February 13, 2012

Tutorial : Cara Membuat Readmore Bergambar

Assalamualaikum.
next tutorial ri nihh, buat readmore bergambar..
mungkin dah de yang tahu..
tapi tuk yang lom lagi tahu, bleh ikut step kat bawah nie..

  1. klik Design --> edit HTML
  2. tanda pada kotak Expand Widget Templates
  3. cari code </head>
  4. dah jupe, paste code kat bawah sebelum </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>

      5.  cari code <data:post.body/>
      6.  gantikan code tersebut dengan code yang kat bawah nihh..

<b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='url readmore yang anda nak'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


*gantikan tulisan merah dengan url readmore yang anda suka..

    7.  save..

kat bawah nie, de contoh readmore yang cik zaiey buat..
lau nak, bolela amik..



http://i.imgur.com/8lPj2.png
http://i.imgur.com/G6htD.png
http://i.imgur.com/3sQln.png
http://i.imgur.com/lYg4b.png
http://i.imgur.com/fzq1h.png
p/s : hihi, selamat men'try' nye..




Bila jari menari,

♥ Terima Kasih Kerana Sudi Membaca Entry Cik Zaiey..♥

1 comment:

  1. owh
    thanks for this tutorial
    nanti leh den guna :-)


    P/S : Nak Minta Tolong Bantu Hans Menang iPad 2

    http://hanspunyablog.blogspot.com/2012/02/pusingan-akhir-contest-gadget-impian.html

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...