Tutorial: Snow Ball Effect

Hye korang.Bertemu lagi kite dalam slot tutorial. Jom kita belajar buat snow ball effect dalam blog.Buat yang tak tahu apa benda tu boleh skodeng sini.

Macam mana nak buat?

1. Sign in blogger > Design > Add Gadget > Html/JavaScript
2. Copy code di bawah dan paste ke dalam Html/Java Script 

              <script>

    //Here you can add your own picture for snow. Just change the url
    var snowsrc="http://1.bp.blogspot.com/-ZhjqZu_ozj8/TjzOYWxIyWI/AAAAAAAABhY/cBGblpOBl9k/s1600/whiteshowNF.png"
    //how many snowflakes there will be (currently 12)
    var no =40;
    //How fast will the snow disappear (0 is never)
    var hidesnowtime = 0;
    //The height the snow will reach before it disappears ("windowheight" or "pageheight")
    var snowdistance = "pageheight";
    ///////////////////////////////End of Settings///////////////////////////////////
    var ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

    function iecompattest()
    {
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }

    var dx, xp, yp;
    var am, stx, sty;
    var i, doc_width = 800, doc_height = 600;

    if (ns6up)
    {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    }
    else
    if (ie4up)
    {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }

    dx = new Array();
    xp = new Array();
    yp = new Array();
    am = new Array();
    stx = new Array();
    sty = new Array();

    for (i = 0; i < no; ++ i)
    {
    dx[i] = 0;
    xp[i] = Math.random()*(doc_width-50);
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    if (ie4up||ns6up)
    {
    if (i == 0)
    {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
    }
    else
    {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
    }
    }
    }

    function snowIE_NS6()
    {
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
    doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i)
    {
    yp[i] += sty[i];
    if (yp[i] > doc_height-50)
    {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = 0;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    }
    dx[i] += stx[i];
    document.getElementById("dot"+i).style.top=yp[i]+"px";
    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
    }

    function hidesnow()
    {
    if (window.snowtimer) clearTimeout(snowtimer)
    for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }


    if (ie4up||ns6up)
    {
    snowIE_NS6();
    if (hidesnowtime>0)
    setTimeout("hidesnow()", hidesnowtime*1000)
    }
    </script>  

3. Warna yang aku merahkan tu, warna snow ball. Kalau korang nak tukar boleh pilih warna di bawah. ( yang sedia ada tu warna putih )



Blue Snow Ball

http://3.bp.blogspot.com/-CoHOWFpHS4w/TjzOY5bWcpI/AAAAAAAABhg/bre9cCFm8-c/s1600/bluesnowNF.png

 Pink Snow Ball

http://3.bp.blogspot.com/-zKDBXedP5vQ/TjzOZbKYtBI/AAAAAAAABhk/wQvxMXkE2FU/s1600/redshowNF.png

Black Snow Ball

http://3.bp.blogspot.com/-JmlboCoRUlI/TjzOYvSXubI/AAAAAAAABhc/puqXBaUW1nw/s1600/blacksnowNF.png

4. Save.... Kbye!!