Tutorial : Bubble Effect (All Templates)

Assalamualaikum and annyeonghaseyo. Hai hai. Tuto kita pada hari ini adalah berkaitan dengan bubble effect. LOL. tak payah nak bermukadimah la rienna ni. Aigoo. Orait! bubble effect ni bukan pada cursor tapi ia akan keluar dari arah bawah. Faham tak? Nak buat macam tu tak? Ok jom.

Template Designer / Denim / Washed Denim

1. Dasboard > Design > Add Gadget > HTML/JavaScript

Template Classic / Blogskin

1. Dashboard > Template

2. Press Ctrl + f serentak dan cari code </style>

3. Copy code dekat bawah ni

<script type="text/javascript">

// <![CDATA[

var colours=new Array("#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=66; // how many bubbles are moving at any given time

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

*   JavaScript Bubble Bath  *

* (c) 2010 mf2fm web-design *

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

* Tutorial by polskahackrew *

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

var swide=800;

var shigh=600;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

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

  var b, i;

  b=document.createElement("div");

  i=b.style;

  i.position="absolute";

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

  document.body.appendChild(b);

  set_scroll();

  set_width();

  var rats, div;

  for (var i=0; i<bubbles; i++) {

    rats=createDiv("3px", "3px");

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="1px";

    div.left="0px";

    div.bottom="1px";

    div.right="0px";

    div.borderLeft="1px solid "+colours[3];

    div.borderRight="1px solid "+colours[1];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.top="0px";

    div.left="1px";

    div.right="1px";

    div.bottom="0px"

    div.borderTop="1px solid "+colours[0];

    div.borderBottom="1px solid "+colours[2];

    div=createDiv("auto", "auto");

    rats.appendChild(div);

    div=div.style;

    div.left="1px";

    div.right="1px";

    div.bottom="1px";

    div.top="1px";

    div.backgroundColor=colours[4];

    div.opacity=0.5;

    if (document.all) div.filter="alpha(opacity=50)";

    b.appendChild(rats);

    bubb[i]=rats.style;

  }

  bubble();

}}

function bubble() {

  var c;

  for (c=0; c<bubbles; c++) if (!bubby[c] && Math.random()<0.333) {

    bubb[c].left=(bubbx[c]=Math.floor(swide/6+Math.random()*swide/1.5)-10)+"px";

    bubb[c].top=(bubby[c]=shigh)+"px";

    bubb[c].width="3px";

    bubb[c].height="3px"

    bubb[c].visibility="visible";

    bubbs[c]=3;

    break;

  }

  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

  setTimeout("bubble()", 40);

}

function update_bubb(i) {

  if (bubby[i]) {

    bubby[i]-=bubbs[i]/2+i%2;

    if (bubby[i]>0) {

      if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

        bubb[i].width=bubbs[i]+"px";

        bubb[i].height=bubbs[i]+"px";

      }

      bubb[i].top=bubby[i]+"px";

      bubbx[i]+=(i%5-2)/5;

      bubb[i].left=bubbx[i]+"px";

    }

    else {

      bubb[i].visibility="hidden";

      bubby[i]=0;

      return;

    }

  }

}

window.onresize=set_width;

function set_width() {

  if (document.documentElement && document.documentElement.clientWidth) {

    swide=document.documentElement.clientWidth;

    shigh=document.documentElement.clientHeight;

  }

  else if (typeof(self.innerHeight)=="number") {

    swide=self.innerWidth;

    shigh=self.innerHeight;

  }

  else if (document.body.clientWidth) {

    swide=document.body.clientWidth;

    shigh=document.body.clientHeight;

  }

  else {

    swide=800;

    shigh=600;

  }

}

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;

  }

  document.getElementById("bod").style.top=sdown+"px";

  document.getElementById("bod").style.left=sleft+"px";

}

function createDiv(height, width) {

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

  div.style.position="absolute";

  div.style.height=height;

  div.style.width=width;

  div.style.overflow="hidden";

  return (div);

}

// ]]>

</script>

4. Bagi template classic paste di bawah code </style>
5. Bagi template designer paste di dalam ruangan HTML/JavaScript
6. Preview & save

merah : code warna bubble. Boleh cari dekat SINI