Home
tutorial
Tips-Tips

09 December 2011

Tutorial : Bubbles Effect Pada Blog

Gadis Kidal Berceloteh...
09/12/2011

.Assalamualaikum !
Peacee ^_^v


Haiiiiiiiiiii. Kalau korang perasan , hari ni , blog Lyssa ada keluar bubble - buble comel kan ?
alahai , ini dia sebagai rujukan bagi yang tak paham ..



Ini hanya tutorial bagi sesiapa yang berminat je tau ? ahak . Ouke , dulu Lyssa ada buat bubles keluar dari cursor kan ? Tengok TUTORIAL INI . Hari ni , bubbles keluar dari bawah blog  . Nak tahu macam mana ? Senang je .


1. Log in > Dashboard > Design > Add a Gadget > Html/JavaScript
2. Copy kod di bawah dan paste pada ruangan Html/JavaScript tersebut :

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF", "#000000"); // 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>
 
3. Haaa. Panjang kan ? Korang copy je lah semua nya ye . ahakx !

4. Yang Lyssa warna kan warna merah tuh , Warna bubble korang . Korang suka warna apa ?
Boleh dapatkan kod warnya DI SINI !!

5. Tukar lah ikot suka korang nak warna ape pun tak pe . Yang penting , masa nak tukar tuh , jangan pulak terpadam tanda ini >> "
Kang tak menjadi pulak .

6. Sekarang ape lagi ? SAVE lah . huhu .
=Selamat Mencuba=

wink  >.^

47 000 orang Pengomen Terhebat !!:

Mira Adzlia said...

ader tuto bru..hihi...ley apply kt blog nih..tenkiu ^_^

NuriN cOoL said...

kak LYSSA cute .. x jd pon .. :(
x pe larh .. sye cbe lg 1 ..
tengs yerr ! :)

Tia Fatiha said...

Nice ! nak cuba lah nanti :D

Nur Ardini said...

Wow cntiknye...
Kak lyssa dini nk mntk tlong bleh??
knape kt design blog dini tkleh nk scroll ke bwh??
add gadget pon tkleh...
klau bleh dini nk buat bubbles tpi tkleh...
kak lyssa bleh tlong tk??

cikyanxyanx said...

cube ! hehehe

deeya_shouranlee said...

bulp2x... hihihi..

ahsfantasy24 said...

Cool la lisa !

Latest Post:
Kalau Tuhan Pisahkan Kita, Awak Marah Tuhan?

kitterw umie said...

urm.kak lyssa x jadik pown nape nie??

Ashi said...

hehehe.... terbaik...

k.nua said...

thnks kak Lyssa ! dah jadi . tgk ni --> http://blogbudakkorea.blogspot.com/

syg kak Lyssa ! ^^

❤MuRni DahLiA❤ said...

mcam bestlaa..nak cube... actly, xde mase sgt nk menguprade blog n menghias blog nih.. so, juz nk cube... suke ngn perkongsian kamu..tq =)

Nisa said...

thnkx kak lyssa ,,
menjadik lh ..!!

Amy Rose said...

wah , jadi ! thanks kak lyssa ;)

Fifiey ;) said...

assalamualaikum kak lisa :)
tuto akaa semue mnjdi :)
and btw , akaa lisa x nk try wt tuto utk blogskin kew ? :)
hee ^^

Sheera Razak said...

rajinnyee buat tutorial hihihi

Shqr!fqh !mqn qrfq ql-mqsh00r said...

kak lyssa..kita buat jadi..
thankzz ye..

nurbalqis92 said...

@Mira Adzliacantik da jadi pun

PPYONG! said...

kak lyssa ,saye buat x mnjdi laa~
mcm mane ni?

Siti Fatimah said...

hehe.. menjad..! terima kash , kak lyssa..! >_<

Iffah Zulaikha Bt Nadzrin said...

thanks kak lyssa bubble tu jadi dan lift tu pun jadi

♥.. TiErA jEa ..♥ said...

akk lyssa , yg warne to naa tuka cmnea ?

Siti Hajjar said...

kak lyssa,
x jdi la..
knpe ea?..hajjar nk tnyer,knpe hajjar pnyer blog ade garis bwh title at sidebar tu?tau x cmne nk ilang kn?

SYAFINAS said...

x jdi pooooowwwwnnnn..

Aliya D'lurvers said...

Thnx bnyk2 ye kak lysaa..semue yg kak lysaa ajr tu mnjadi la.. hehe..syg kak lysaa..

LoL ___ p!ka said...

thanxz . nak gune a tuto nie :)

Min Adya said...

yes..menjadi pon cute!!mcm dalam air pepsi dah..burrrrr HUHUHUHu..

thank sys..mita sys halalkan tutor nie..:)

Siti Aisya said...

salam...ala..x jd pon..tp cursor yg lep2 tu jd..tenkiu:p

MiSzRaBiAh said...

kak lisya,, knpa bila dh jadiey.. butang follow and dashboard takde..?

Aien =) said...

Thanks Kak Lyssa yg Comey =)
cantik n cute..
tutor kak lyssa semuanye senang nak buat =)
syg kak Lyssa <3

cute PRINCESSES said...

sakai tau x!penat2 copy,tp x jd lgsung!! >:(

nozi said...

salam..tenks for dis useful tutorials ;D
keep it up

syikin firdaus said...

thnks kaq ! but simple saje sy pnyer .. saya suke !

love coffee said...

thanks.....................

haikal kecil said...

terima kasih atas tutor nya....(^_^)
jdi....!! hehehe....:D

Eyla Efyza said...

Thanks :)

Nur Nad said...

Assalamualaikum kak lyssa . Syukran ya !

Aini Fitri said...

Salam kak lyssa . Tenkiu ya kak . Comel je bubble tu .
*newbie here

miSs laVeNdeR said...

mjadikkk..yess!!!!!!sukenyee...thx lyssa... <3

Delia Jessica said...

kak lyssa. cam ne nk buat guna blogger baru kak??? pleass bg tuto..

Farah Wahidah said...

jadi tpy lambat , knp ekk ? ? ?

nur huda faiqah said...

kak lyssa jadi lah !! thanks tau !!

Eycha Lieza said...

kak lyssa tk jadi pun berkali kali buad nie

❁Syakirah❁ said...

Thanks kak Lyysa .. mkin lama BUBBLES tu semakin besar . thanks ya .

muslim girl said...

assalamualaikum kak lysa tq sebab buat tutorial ni ye.beguna sangat.kak lysa macam mana nak copy kak lisa punye tutorial then masuk ke blog saya?

beby eiyma said...

ta jd lah kak..
hurm, cmnea erk ?

alvi nurjanah said...

pastena di blog tu gimana?

nur arrissa aqilla said...

Kak lyssa, sy nak ucap terima kasih! saya banyak belajar cara edit blog gna tuto akk..
tp sy xthu la mcm mna nak cari "Tick Expand Widget Templates" ? :'(