Showing posts with label effect blog. Show all posts
Showing posts with label effect blog. Show all posts

Friday, 20 April 2012

::TUTORIAL Efek Bunga Api/FIREWORKS Pada Blog::




Assalamualaikum..
hye..
yang kalini aq nak buat tutorial efek bunga api/FIREWORKS pada blog
cuba lihat gambar ni:

cuba lihat effeck di blog ni.. cantik kan...
nak buat??
sini ikut saya

1. Log in > Dashboard > Design > Add A Gadget > Html/JavaScript
2. Copy dan paste pada ruang Html/Java scrip tadi
<script type="text/javascript">
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c"); 
//                     blue    red     green   purple  cyan    orange  pink

/****************************
*      Fireworks Effect     *
*(c)2004-11 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
*nak lebih tutorial http://syahminaahmad.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;

window.onload=function() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}

function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}

function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}

function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}

function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) { 
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);
  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}

function stepthrough(N) { 
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
} 

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>
3. Korang boleh Tukar
 merah = Jumlah bits
 oren = kelajuan animation (nombor bawah lebih cepat)
 hijau = Jumlah bungaapi,, *jangan letak banyak sangat akan memberatkan blog
 biru = kod warna *boleh cari kat sini

4. Save
dah siap..
selamat mencuba 
-out-
Ditaip Oleh Tepat Pada Jam 1 comment:
Labels: ,

::TUTORIAL Buat Effect Snow Pada Blog::



Assalamualaikum
Hye..
hahaha,, harini paling banyak tutorial aq buat
layan jew ah,,
yang ni pulak tutorial buat effect snow pada blog
cuba lihat gambar ni:

cuba lihat pada blog mina sekarang,,

nak buat??
sini ikut saya

1. Log in > Dashboard > Design > Add A Gadget > Html/JavaScript
2. Copy dan paste pada ruang Html/Java scrip tadi
<script type="text/javascript">
// <![CDATA[
var speed=33; // kelajuan snow jatuh,, nombor lebih kecil lebih laju
var flakes=100; //bilangan snow
var colour="#96c"; //warna snow
var slush=20; //tinggi snow yang terbentuk di bawah blog

/***************************\
*     Let It Snow Effect    *
*(c)2004-11 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
*nak lebih tutorial http://syahminaahmad.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh, boddie;
window.onload=function() { if (document.getElementById) {
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.overflow="visible";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (var i=0; i<flakes; i++) {
    flks[i]=createDiv(3, 3, colour);
    flkx[i]=3*Math.floor(Math.random()*swide/3);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    boddie.appendChild(flks[i]);
  }
  setInterval("let_it_snow()", speed);
}}

function createDiv(height, width, colour) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min-3;
  shigh=sh_min;
  if (slush) {
    if (swide/3>slss.length) for (i=slss.length; i<swide/3; i++) {
      if (!slsh[i]) slsh[i]=3;
      slss[i]=createDiv(slsh[i], 3, colour);
      boddie.appendChild(slss[i]);
    }
    for (i=0; i<swide/3; i++) {
      slss[i].style.height=slsh[i]+"px";
      slss[i].style.top=shigh-slsh[i]+"px";
      slss[i].style.left=3*i+"px";
    }
    if (i<slss.length && slss[i].style.left!="-3px") for (; i<slss.length; i++) slss[i].style.left="-3px";
  }
}

function let_it_snow(c) {
  var i, x, o=0, z=0;
  for (i=0; i<flakes; i++) {
    flky[i]+=fldy[i];
x=Math.floor(flkx[i]/3);
    if (slush) {
      o+=slsh[x];
      if (flky[i]>=shigh-slsh[x]) {
        if (x<swide && slsh[x]>slsh[x+1]+3) x++;
        else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
        slss[x].style.top=shigh-(slsh[x]+=3)+"px";
        slss[x].style.height=slsh[x]+"px";
flky[i]=shigh;
 }
    }
    if (flky[i]>=shigh || flkx[i]>swide) {
 flky[i]=0;
 fldy[i]=2+Math.floor(Math.random()*4);
 flkx[i]=3*Math.floor(Math.random()*swide/3);
 flks[i].style.left=flkx[i]+"px";
 z++;
}
flks[i].style.top=flky[i]+"px";
  }
  if (o>flakes*slush) for (i=0; i<slsh.length; i++) if (slsh[i]>3) slsh[i]--;
  if (z || o>flakes*slush) set_width();
}
// ]]>
</script>
3. Korang boleh tukar
merah = kelajuan snow jatuh,, nombor lebih kecil lebih laju
oren = bilangan snow
hihau = kod warna snow *boleh cari kat sini
biru = tinggi snow yang terbentuk di bawah blog"0-20"
4. Save
dah siap...
selamat mencuba
Ditaip Oleh Tepat Pada Jam No comments:
Labels: ,

::TUTORIAL Effect Warna Bar Bergerak Di Background::


Assalamualaikum
Hye

ce lihat at blog ni skrg..
cantik kan effect tu..
nak buat??
Sini Ikut Saya

1. Log in > Dashboard > Design > Add A Gadget > Html/JavaScript
2. Copy dan paste pada ruang Html/Java scrip tadi
<script type="text/javascript">
// <![CDATA[
var border=50; // berapa lebar border
var effects=3; // jumlah effect dalam page
var speed=50; // kelajuan animation (nombor bawah lebih cepat)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (can be as long or short as you like)
/****************************
*1970s Groovy WebPage Effect*
*(c)2008-11 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
*MORE TUTORIAL AT http://syahminaahmad.blogspot.com *
* DON'T EDIT BELOW THIS BOX *
****************************/
var swide, shigh, boddie;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
window.onload=function() { if (document.getElementById) {
  var i, d, s;
  boddie=document.createElement("div");
  s=boddie.style;
  s.position="fixed";
  s.backgroundColor="transparent";
  s.top="0px";
  s.left="0px";
  s.width="100%";
  s.zIndex="-1";
  i=document.body.style.backgroundColor;
  if (document.body.parentNode) {
    if (i) document.body.parentNode.style.backgroundColor=i;
    document.body.style.backgroundColor="transparent";
  }
  document.body.insertBefore(boddie, document.body.firstChild);
  set_width();
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
    s.width="100%";
    h[i]=Math.floor(Math.random()*shigh/2.5);
    h[i+1]=Math.floor(Math.random()*shigh/2.5);
    h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    s.top=h[i]+"px";
    s.bottom=h[i+1]+"px";
    s.position="absolute";
    s.borderColor=jazz();
    s.borderStyle="solid";
    s.borderWidth=border+"px 0px";
    s.backgroundColor=jazz();
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    else s.opacity=op;
    h[i+5]=s;
    boddie.appendChild(d);
  }
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
    s.height="100%";
    v[i]=Math.floor(Math.random()*swide/2.5);
    v[i+1]=Math.floor(Math.random()*swide/2.5);
    v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3));
    s.left=v[i]+"px";
    s.right=v[i+1]+"px";
    s.position="absolute";
    s.borderColor=jazz();
    s.borderStyle="solid";
    s.borderWidth="0px "+border+"px";
    s.backgroundColor=jazz();
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    else s.opacity=op;
    v[i+5]=s;
    boddie.appendChild(d);
  }
  setInterval('groovy()', speed);
}}
var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}
function scat(no) {
var yes;
no=no*Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}
function groovy() {
  var i;
  for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i]+h[i+1]>shigh-border*2) {
 h[i+4]=h[i+2];
 h[i+2]=-h[i+3];
 h[i+3]=-h[i+4];
 h[i+5].backgroundColor=jazz();
}
    if (h[i]<-border && Math.random()<1/border) {
 h[i+2]=scat(h[i+3]);
 if (h[i+1]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i]>shigh && Math.random()<1/border) {
 h[i+2]=-scat(h[i+3]);
}
if (h[i+1]<-border && Math.random()<1/border) {
 h[i+3]=scat(h[i+2]);
 if (h[i]>shigh) h[i+5].borderColor=jazz();
}
else if (h[i+1]>shigh && Math.random()<1/border) {
 h[i+3]=-scat(h[i+2]);
}
h[i+5].top=h[i]+"px";
h[i+5].bottom=h[i+1]+"px";
  }
  for (i=0; i<effects*10; i+=10) {
v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i]+v[i+1]>swide-border*2) {
 v[i+4]=v[i+2];
 v[i+2]=-v[i+3];
 v[i+3]=-v[i+4];
 v[i+5].backgroundColor=jazz();
}
if (v[i]<-border && Math.random()<1/border) {
 v[i+2]=scat(v[i+3]);
 if (v[i+1]>swide) v[i+5].borderColor=jazz();
}
else if (v[i]>swide && Math.random()<1/border) {
 v[i+2]=-scat(v[i+3]);
}
if (v[i+1]<-border && Math.random()<1/border) {
 v[i+3]=scat(v[i+2]);
 if (v[i]>swide) v[i+5].borderColor=jazz();
}
else if (v[i+1]>swide && Math.random()<1/border) {
 v[i+3]=-scat(v[i+2]);
}
v[i+5].left=v[i]+"px";
v[i+5].right=v[i+1]+"px";
  }
}
window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
  boddie.style.height=shigh+"px";
}
// ]]>
</script>

3. Korang boleh tukar
 merah = berapa lebar border
 oren = jumlah effect dalam page
 biru = kelajuan animation (nombor bawah lebih cepat)
 hijau = kod warna *boleh cari kat sini
4. Save

dah siap..
selamat mencuba
-out-


Ditaip Oleh Tepat Pada Jam No comments:
Labels: ,

::TUTORIAL Efek Bintang Angkasa Pada Blog::

assalamualaikum,,
hye..
hari ni aq nak ajar korang satu tutorial,,
tutorial buat Efek Bintang Angkasa Pada Blog,
cuba lihat gambar ni
klw x pon cube tgk at blog mina skrag ni adew an,,
 menarik bukan,,
kalaw korang nak buat,,
sini ikut saya,,

1. Log in > Dashboard > Design > Add A Gadget > Html/JavaScript
2. Copy dan paste pada ruang Html/Java scrip tadi
<script type="text/javascript">// <![CDATA[var speed=33; // lower number for fastervar warp=3; // from 1 to 10var stars=100; // number of starsvar colour="#66FF66"; // colour of starsvar position=0; // set to '-1' for stars to appear behind text on page
/***************************** Star Warp Effect ** (c) 2005 mf2fm web-design ** http://www.mf2fm.com/rv ** nak lebih tutorial http://syahminaahmad.blogspot.com *****************************/var i;var strs=new Array();var strx=new Array();var stry=new Array();var stdx=new Array();var stdy=new Array();var swide=800;var shigh=600;warp/=100;window.onload=function() { if (document.getElementById) {var b, s, temp;set_width();b=document.createElement("div");s=b.style;s.position="absolute";s.zIndex=position;b.setAttribute("id", "bod");document.body.appendChild(b);set_scroll();for (i=0; i<stars; i++) {strs[i]=document.createElement("div");strs[i].style.backgroundColor=colour;strs[i].style.overflow="hidden";strs[i].style.position="absolute";stdy[i]=Math.random()*4-2;stdx[i]=Math.random()*6-3;temp=Math.random()*100;strx[i]=swide/2+temp*stdx[i];stry[i]=shigh/2+temp*stdy[i];if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {strs[i].style.width="2px";strs[i].style.height="2px";}else {strs[i].style.width="1px";strs[i].style.height="1px";}b.appendChild(strs[i]);}setInterval("warp_drive()", speed);}}
function warp_drive() {for (i=0; i<stars; i++) {stry[i]+=stdy[i];strx[i]+=stdx[i];stdx[i]*=1+warp;stdy[i]*=1+warp;if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {strs[i].style.left=Math.floor(strx[i])+"px";strs[i].style.top=Math.floor(stry[i])+"px"}else {strx[i]=swide/2;stry[i]=shigh/2;stry[i]+=stdy[i]=Math.random()*4-2;strx[i]+=stdx[i]=Math.random()*6-3;if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {strs[i].style.width="2px";strs[i].style.height="2px";}else {strs[i].style.width="1px";strs[i].style.height="1px";}}}}
window.onresize=set_width;function set_width() {if (typeof(self.innerWidth)=="number") {swide=self.innerWidth-13;shigh=self.innerHeight-13;}else if (document.documentElement && document.documentElement.clientWidth) {swide=document.documentElement.clientWidth;shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) {swide=document.body.clientWidth;shigh=document.body.clientHeight;}else {swide=800;shigh=600;}swide-=2;shigh-=2;}
window.onscroll=set_scroll;function set_scroll() {var sleft, sdown;if (typeof(self.pageYOffset)=="number") {sdown=self.pageYOffset;sleft=self.pageXOffset;}else if (document.body.scrollTop || document.body.scrollLeft) {sdown=document.body.scrollTop;sleft=document.body.scrollLeft;}else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {sleft=document.documentElement.scrollLeft;sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}var s=document.getElementById("bod").style;s.top=sdown+"px";s.left=sleft+"px";}// ]]></script>
3. Tukar
   Pink = kelajuan. nombor lebih kecil lebih laju  *klw x phm biarkan je
   Kuning = warp. ada 10 jenis. pilih 1 nombor dari 1 sampai 10 *klw x phm biarkan je
   Merah = bilangan star  *klw x phm biarkan je
   Hijau = kod warna star... nk cari kod warna kt sini
   Biru = temapt bintang keluar..' 0 ' untuk didepan '-1' untuk di blakang text. *klw x phm biarkan je
4. Save
dah siap..
senang jew kan,,
selamat mencuba
-out-
Ditaip Oleh Tepat Pada Jam No comments:
Labels: ,
Subscribe to: Posts (Atom)

Like Sini !

Please Comments Here