. Tutorial - Fireworks on blog

1.Dashboard>Design>Page Elements>Add Gadget>Html/Javascript

2.Copy code ni and paste.

<script type="text/javascript">

// <![CDATA[

var bits=100; // how many bits

var intensity=7; // how 'powerful' is the explosion (from 3 to 10 is best)

var speed=20; // how fast - smaller is faster

var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cc", "#f93");

//                     blue    red     green   purple  cyan    orange

/****************************

*      Fireworks Effect     *

*(c) 2004-6 mf2fm web-design*

*  http://www.mf2fm.com/rv  *

* DON'T EDIT BELOW THIS BOX *

****************************/

var dx, xpos, ypos, bangheight;

var Xpos=new Array();

var Ypos=new Array();

var dX=new Array();

var dY=new Array();

var decay=new Array();

var colour=0;

var swide=800;

var shigh=600;

function write_fire() {

  var b, s;

  b=document.createElement("div");

  s=b.style;

  s.position="absolute";

  b.setAttribute("id", "bod");

  document.body.appendChild(b);

  set_scroll();

  set_width();

  b.appendChild(div("lg", 3, 4));

  b.appendChild(div("tg", 2, 3));

  for (var i=0; i<bits; i++) b.appendChild(div("bg"+i, 1, 1));

}

function div(id, w, h) {

  var d=document.createElement("div");

  d.style.position="absolute";

  d.style.overflow="hidden";

  d.style.width=w+"px";

  d.style.height=h+"px";

  d.setAttribute("id", id);

  return (d);

}

function bang() {

  var i, X, Y, Z, A=0;

  for (i=0; i<bits; i++) {

    X=Math.round(Xpos[i]);

    Y=Math.round(Ypos[i]);

    Z=document.getElementById("bg"+i).style;

    if((X>=0)&&(X<swide)&&(Y>=0)&&(Y<shigh)) {

      Z.left=X+"px";

      Z.top=Y+"px";

    }

    if ((decay[i]-=1)>14) {

      Z.width="3px";

      Z.height="3px";

    }

    else if (decay[i]>7) {

      Z.width="2px";

      Z.height="2px";

    }

    else if (decay[i]>3) {

      Z.width="1px";

      Z.height="1px";

    }

    else if (++A) Z.visibility="hidden";

    Xpos[i]+=dX[i];

    Ypos[i]+=(dY[i]+=1.25/intensity);

  }

  if (A!=bits) setTimeout("bang()", speed);

}

function stepthrough() {

  var i, Z;

  var oldx=xpos;

  var oldy=ypos;

  xpos+=dx;

  ypos-=4;

  if (ypos<bangheight||xpos<0||xpos>=swide||ypos>=shigh) {

    for (i=0; i<bits; i++) {

      Xpos[i]=xpos;

      Ypos[i]=ypos;

      dY[i]=(Math.random()-0.5)*intensity;

      dX[i]=(Math.random()-0.5)*(intensity-Math.abs(dY[i]))*1.25;

      decay[i]=Math.floor((Math.random()*16)+16);

      Z=document.getElementById("bg"+i).style;

      Z.backgroundColor=colours[colour];

      Z.visibility="visible";

    }

    bang();

    launch();

  }

  document.getElementById("lg").style.left=xpos+"px";

  document.getElementById("lg").style.top=ypos+"px";

  document.getElementById("tg").style.left=oldx+"px";

  document.getElementById("tg").style.top=oldy+"px";

}

function launch() {

  colour=Math.floor(Math.random()*colours.length);

  xpos=Math.round((0.5+Math.random())*swide*0.5);

  ypos=shigh-5;

  dx=(Math.random()-0.5)*4;

  bangheight=Math.round((0.5+Math.random())*shigh*0.4);

  document.getElementById("lg").style.backgroundColor=colours[colour];

  document.getElementById("tg").style.backgroundColor=colours[colour];

}

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

}

window.onresize=set_width;

function set_width() {

  if (typeof(self.innerWidth)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

  }

  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;

  }

}

window.onload=function() { if (document.getElementById) {

  set_width();

  write_fire();

  launch();

  setInterval('stepthrough()', speed);

}}

// ]]>

</script>

3.done! Mudah kan 

=.=

segala tutorial hendaklah di creditkan kepada ieyha