Jumat, 25 Desember 2009

Make Snow Effect in Blogger

In accordance with the theme this time on Christmas Day and welcome the New Year 2010, this time I will discuss how to make a snow effect on the blog with pictures of our own creation, without having to use javascript borrow to another blogger's files, we just need to hosting images on free image hosting like TinyPic.

Follow instructions bellow:

1. Open Blogger Draft 

2. Click Layout --> Edit HTML and "Download Full Template", save to computer your template to be on guard if this experiment fails

3. Create a snow image creation itself, can be made on Logo Maker, its software can be downloaded here

4. After the image is created, and save on free image hosting such as TinyPic

5. Encode first script bellow to Centricle.Com, than copy-paste to your template.

6. Placement script under the script:       <body>



<script type="text/javascript">

//Configure below to change URL path to the snow image

var snowsrc="YOUR_IMAGE_URL"

// 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)? "snow.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>



7. Change "YOUR_IMAGE_URL" (script purple color) with image hosting where you save the image file

8. Save your template, and see the results.



Similarly tutorials, tips and tricks can be useful for colleagues Blogger as well.

Good Luck

Tidak ada komentar:

Posting Komentar