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  >.^
KONGSIKAN ARTIKEL INI..
Previous
Next Post »

49 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
Mira Adzlia
AUTHOR
December 9, 2011 at 10:47 AM delete

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

Reply
avatar
NuriN cOoL
AUTHOR
December 9, 2011 at 10:56 AM delete

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

Reply
avatar
Tia Fatiha
AUTHOR
December 9, 2011 at 10:57 AM delete

Nice ! nak cuba lah nanti :D

Reply
avatar
Nur Ardini
AUTHOR
December 9, 2011 at 11:00 AM delete

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??

Reply
avatar
kitterw umie
AUTHOR
December 9, 2011 at 12:02 PM delete

urm.kak lyssa x jadik pown nape nie??

Reply
avatar
Ashi
AUTHOR
December 9, 2011 at 12:19 PM delete

hehehe.... terbaik...

Reply
avatar
k.nua
AUTHOR
December 9, 2011 at 12:40 PM delete

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

syg kak Lyssa ! ^^

Reply
avatar
December 9, 2011 at 1:35 PM delete

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

Reply
avatar
Nisa
AUTHOR
December 9, 2011 at 5:59 PM delete

thnkx kak lyssa ,,
menjadik lh ..!!

Reply
avatar
Amy Rose
AUTHOR
December 10, 2011 at 12:25 PM delete

wah , jadi ! thanks kak lyssa ;)

Reply
avatar
Fifiey ;)
AUTHOR
December 10, 2011 at 3:12 PM delete

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

Reply
avatar
Sheera Razak
AUTHOR
December 10, 2011 at 6:38 PM delete

rajinnyee buat tutorial hihihi

Reply
avatar
December 10, 2011 at 10:33 PM delete

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

Reply
avatar
PPYONG!
AUTHOR
December 11, 2011 at 6:52 PM delete

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

Reply
avatar
Siti Fatimah
AUTHOR
December 12, 2011 at 8:28 PM delete

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

Reply
avatar
December 14, 2011 at 10:12 AM delete

thanks kak lyssa bubble tu jadi dan lift tu pun jadi

Reply
avatar
December 17, 2011 at 4:14 AM delete

akk lyssa , yg warne to naa tuka cmnea ?

Reply
avatar
Siti Hajjar
AUTHOR
January 3, 2012 at 1:50 PM delete

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?

Reply
avatar
SYAFINAS
AUTHOR
January 18, 2012 at 3:56 PM delete

x jdi pooooowwwwnnnn..

Reply
avatar
January 27, 2012 at 11:55 PM delete

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

Reply
avatar
LoL ___ p!ka
AUTHOR
February 6, 2012 at 10:15 AM delete

thanxz . nak gune a tuto nie :)

Reply
avatar
Min Adya
AUTHOR
February 12, 2012 at 1:37 PM delete

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

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

Reply
avatar
Siti Aisya
AUTHOR
February 20, 2012 at 1:38 PM delete

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

Reply
avatar
MiSzRaBiAh
AUTHOR
March 6, 2012 at 3:54 PM delete

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

Reply
avatar
Aien =)
AUTHOR
March 11, 2012 at 1:53 PM delete

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

Reply
avatar
March 16, 2012 at 5:42 PM delete

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

Reply
avatar
nozi
AUTHOR
May 15, 2012 at 12:36 AM delete

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

Reply
avatar
May 20, 2012 at 4:30 PM delete

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

Reply
avatar
love coffee
AUTHOR
May 28, 2012 at 4:30 PM delete

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

Reply
avatar
haikal kecil
AUTHOR
June 8, 2012 at 1:33 AM delete

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

Reply
avatar
Nur Nad
AUTHOR
July 28, 2012 at 9:48 PM delete

Assalamualaikum kak lyssa . Syukran ya !

Reply
avatar
Aini Fitri
AUTHOR
August 23, 2012 at 2:28 AM delete

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

Reply
avatar
miSs laVeNdeR
AUTHOR
September 18, 2012 at 1:03 AM delete

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

Reply
avatar
Delia Jessica
AUTHOR
October 2, 2012 at 5:00 PM delete

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

Reply
avatar
Farah Wahidah
AUTHOR
November 18, 2012 at 12:04 AM delete

jadi tpy lambat , knp ekk ? ? ?

Reply
avatar
December 3, 2012 at 1:21 PM delete

kak lyssa jadi lah !! thanks tau !!

Reply
avatar
Eycha Lieza
AUTHOR
December 18, 2012 at 1:24 PM delete

kak lyssa tk jadi pun berkali kali buad nie

Reply
avatar
December 31, 2012 at 4:04 PM delete

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

Reply
avatar
muslim girl
AUTHOR
December 31, 2012 at 11:46 PM delete

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?

Reply
avatar
beby eiyma
AUTHOR
May 12, 2013 at 7:26 PM delete

ta jd lah kak..
hurm, cmnea erk ?

Reply
avatar
alvi nurjanah
AUTHOR
December 8, 2013 at 10:07 AM delete

pastena di blog tu gimana?

Reply
avatar
December 31, 2013 at 10:20 PM delete

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" ? :'(

Reply
avatar
November 20, 2015 at 2:19 AM delete

Assalamualaikum akak...tenkiu..sebab memang jadi......kne tunggu bape sec je...hheee

Reply
avatar

Google+ Followers