Add buble to Your Blog

Give you page a bubbly personality with this script! Bubbles drift upwards, then vanish, in an incessant loop.

First Step

1. Save this image, by right clicking the image, and choosing "save as":
2. Upload this image to the server that you use often, eg to google sites.
3. Copy this script, then upload this file to the server that you use often with extention .js [ex : bubble.js], eg to google sites.
   

var no = 15; // image number or falling rate

var speed = 2; // the lower the number the faster the image moves

var snow = new Array();

snow[0] = "bubble.gif"

snow[1] = "bubble.gif"

snow[2] = "bubble.gif"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer

var ie4up = (document.all) ? 1 : 0;

var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp; // coordinate and position variables

var am, stx, sty; // amplitude and step variables

var i, doc_width = 800, doc_height = 1800;

if (ns4up||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();

j = 0;

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 (ns4up) { // set layers

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");

} } else if (ie4up||ns6up) { if (i == 0)

{

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");

}

}

if (j == (snow.length-1)) { j = 0; } else { j += 1; }

}

function snowNS() { // Netscape main animation function

for (i = 0; i < no; ++ i) { // iterate for every dot

yp[i] -= sty[i]; if (yp[i] < -50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = doc_height;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight; }

dx[i] += stx[i];

document.layers["dot"+i].top = yp[i]+pageYOffset;

document.layers["dot"+i].left = xp[i] +

am[i]*Math.sin(dx[i]);

}

setTimeout("snowNS()", speed);

}

function snowIE_NS6() { // IE main animation function

for (i = 0; i < no; ++ i) { // iterate for every dot

yp[i] -= sty[i];

if (yp[i] < -50) {

xp[i] = Math.random()*(doc_width-am[i]-30);

yp[i] = doc_height;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;

doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;

}

dx[i] += stx[i];

if (ie4up){

document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;

document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}

else if (ns6up){

document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;

document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);

}

}

setTimeout("snowIE_NS6()", speed);

}

if (ns4up) {

snowNS();

} else if (ie4up||ns6up) {

snowIE_NS6();

}

Copy the URL of the file before you upload. ( just sample, don't use that )

ex : www.habeebchuex.com/bubble.js

Second Step
Login go to your layouts section. On the 'Page Elements' setup page
make sure you have a label widget already installed where you want it (it can be moved around
later). Then go to the Edit HTML settings and leave the widgets NOT exapanded. It will make
things easier to deal with.

Find

<head>
<b:include data='blog' name='all-head-content'/>

paste this script after <b:include data='blog' name='all-head-content'/>

<script src='your URL js' type='text/javascript'/>

change green text with your url js. ( as an example )

<head>
<b:include data='blog' name='all-head-content'/>
<script src='www.habeebchuex.com/buble.js' type='text/javascript'/>

Now if all has gone well, and you have posts already labeled, then if you preview the
blog you should see some form of the Cloud appearing. If it doesn't appear, then something
went wrong. You should probably back out and try it again from the start.