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 ^_^

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 ! :)

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

Nice ! nak cuba lah nanti :D

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

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

urm.kak lyssa x jadik pown nape nie??

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

hehehe.... terbaik...

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 ! ^^

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 =)

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

thnkx kak lyssa ,,
menjadik lh ..!!

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

wah , jadi ! thanks kak lyssa ;)

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

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

rajinnyee buat tutorial hihihi

avatar
December 10, 2011 at 10:33 PM delete

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

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

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

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

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

avatar
December 14, 2011 at 10:12 AM delete

thanks kak lyssa bubble tu jadi dan lift tu pun jadi

avatar
December 17, 2011 at 4:14 AM delete

akk lyssa , yg warne to naa tuka cmnea ?

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?

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

x jdi pooooowwwwnnnn..

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

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

thanxz . nak gune a tuto nie :)

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..:)

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

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

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

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

avatar
March 16, 2012 at 5:42 PM delete

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

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

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

avatar
May 20, 2012 at 4:30 PM delete

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

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

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

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

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

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

Assalamualaikum kak lyssa . Syukran ya !

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

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

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

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

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

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

jadi tpy lambat , knp ekk ? ? ?

avatar
December 3, 2012 at 1:21 PM delete

kak lyssa jadi lah !! thanks tau !!

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

kak lyssa tk jadi pun berkali kali buad nie

avatar
December 31, 2012 at 4:04 PM delete

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

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?

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

ta jd lah kak..
hurm, cmnea erk ?

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

pastena di blog tu gimana?

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

avatar
November 20, 2015 at 2:19 AM delete

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

avatar

Google+ Followers