Add Falling Snowflakes / Yahoo Smiley Emoticons / colored stars / Snow to Your Blog ~ Kyaw Soe Tun Aung (နည်းပညာစုစည်းမှု)

Blog တြင္ ႏွင္းက်တဲ႕ code ေလးပါ ။ တစ္ျခားပံုေတြလဲပါပါတယ္။

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

//Configure below to change URL path to the snow image
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNfyatoK2iEpnGsG40whcK2tfsl7y6zLjqsQH60CiUMFtB_-RRsP2TIy83d8t2syMGqsoOoSgaHmOQElHE3pHfiQkSfqLcLeZfslZD7Gjm2EnS7LpfyGhlasZ73zuxcEZt1WU4jXRfLU/s1600/snow-01.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
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; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNfyatoK2iEpnGsG40whcK2tfsl7y6zLjqsQH60CiUMFtB_-RRsP2TIy83d8t2syMGqsoOoSgaHmOQElHE3pHfiQkSfqLcLeZfslZD7Gjm2EnS7LpfyGhlasZ73zuxcEZt1WU4jXRfLU/s1600/snow-01.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
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://dynamicdrive.com\"><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() { // IE and NS6 main animation function
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) { // iterate for every dot
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>
<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

And now click Save

# you can change :

To set the number of snow balls edit the number 10
To change the snow image replace the picture link with yours

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNfyatoK2iEpnGsG40whcK2tfsl7y6zLjqsQH60CiUMFtB_-RRsP2TIy83d8t2syMGqsoOoSgaHmOQElHE3pHfiQkSfqLcLeZfslZD7Gjm2EnS7LpfyGhlasZ73zuxcEZt1WU4jXRfLU/s1600/snow-01.gif

You can replace the image with anything you want. You can display falling hearts, falling the autumn leaves, falling New Year message and diamonds, Just play with the code and change the flavors.

make a color snow effect on the blog

you like color snow.if I could make the effect of snow with different colors.code that will allow you to add any snow fall color to your blog.To change the color of snow fall only change the highlight color blue in code.You can change basic colors (red, black, green etc)

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type='text/javascript'>

//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&

window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 40; //Number of flakes

var timer = 30; //setTimeout speed. Varies on different comps

var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];

var x = [];

var fall = [];

var theFlakes = [];

var sfs = [];

var step = [];

var currStep = [];

var h,w,r;

var d = document;

var pix = "px";

var domWw = (typeof window.innerWidth == "number");

var domSy = (typeof window.pageYOffset == "number");

var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&

typeof d.documentElement.style.MozOpacity == "string")

num = 12;

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

sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'

+sfs[i]+'px;height:'+sfs[2]+'px;background-color:blue;font-size:'+sfs[2]+'px"><\/div>');

currStep[i] = 0;

fall[i] = (sfs[i] == 1)?

Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);

step[i] = (sfs[i] == 1)?

0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;

}

if (domWw) r = window;

else{

if (d.documentElement &&

typeof d.documentElement.clientWidth == "number" &&

d.documentElement.clientWidth != 0)

r = d.documentElement;

else{

if (d.body &&

typeof d.body.clientWidth == "number")

r = d.body;

}

}

function winsize(){

var oh,sy,ow,sx,rh,rw;

if (domWw){

if (d.documentElement && d.defaultView &&

typeof d.defaultView.scrollMaxY == "number"){

oh = d.documentElement.offsetHeight;

sy = d.defaultView.scrollMaxY;

ow = d.documentElement.offsetWidth;

sx = d.defaultView.scrollMaxX;

rh = oh-sy;

rw = ow-sx;

}

else{

rh = r.innerHeight;

rw = r.innerWidth;

}

h = rh - 2;

w = rw - 2;

}

else{

h = r.clientHeight - 2;

w = r.clientWidth - 2;

}

}

function scrl(yx){

var y,x;

if (domSy){

y = r.pageYOffset;

x = r.pageXOffset;

}

else{

y = r.scrollTop;

x = r.scrollLeft;

}

return (yx == 0)?y:x;

}

function snow(){

var dy,dx;

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

dy = fall[i];

dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;

x[i]+=dx;

if (x[i] >= w || y[i] >= h){

y[i] = -10;

x[i] = Math.round(Math.random() * w);

fall[i] = (sfs[i] == 1)?

Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);

step[i] = (sfs[i] == 1)?

0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;

}

theFlakes[i].top = y[i] + scrl(0) + pix;

theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];

}

setTimeout(snow,timer);

}

function init(){

winsize();

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

theFlakes[i] = document.getElementById("flake"+(idx+i)).style;

y[i] = Math.round(Math.random()*h);

x[i] = Math.round(Math.random()*w);

}

snow();

}

if (window.addEventListener){

window.addEventListener("resize",winsize,false);

window.addEventListener("load",init,false);

}

else if (window.attachEvent){

window.attachEvent("onresize",winsize);

window.attachEvent("onload",init);

}

})();

}//End.

</script>
<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

And now click Save

Add Falling Snowflakes / Yahoo Smiley Emoticons / colored stars / Flowers / Leaves / stars / butterfly / heart to Your Blog

Special Thanks http://bdlab.blogspot.com
Picture From http://www.freesmileys.org

Falling yikes-01 :