Oodlebit

Cara membuat efek gelembung bertaburan di blog

Cara membuat efek gelembung bertaburan di blog

Mengubah mouse anda mengeluarkan gelembung gelembung air setiap kali mouse digerakan ini menmbah cantik blog kita dan pastinya seneng banget deh ngeliatnya karena ini menurutku sangatlah unik setelah kita meletakan scrip ini pada blog kita maka mouse yang kita gerakan benar benar mengeluarkan gelembung gelembung yang berterbangan dan menjadi hiasan pada blog kita.

Nah bagaimana caranya meletakan scripnya dan seperti apa script gelembung tersebut kok bikin penasaran ,
Kadang hampir tak percaya sih kok bisa menghasilkan gelembung yang berterbangan hanya dengan memasang scrip saja,. Tapi yang ini sedikit aneh scripnya dan beda dengan script bintang yang bertaburan , karena scrip GELEMBUNG BERTERBANGAN INI banyak sekali namun cara pemasanganya sangatlah mudah daripada pemasangan script bintang berjatuhan.
 Baiklah sahabat blogger langsung saja kita bahas cara pemasangan script gelembong berterbangan ini:

script gelembong
script gelembong


Baca juga : Tip atau Cara membuat tambahan SEO

Seperti biasa :
Masuk ke blog anda
Pilih Tata Letak
klik Tambah gadget
klik HTML/Java script
Pastekan kode dibawah ini 
setelah itu klik simpan dan lihat hasilnya 

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
    // <![CDATA[
var colours=new Array ("#FF9900", "#FF9900", "#FF9900", "#FF9900", "#FF9900"); // colours for top, right, bottom and left borders and background of bubbles
    var bubbles=
100; // maximum number of bubbles on screen
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var bubb=new Array();
    var bubbx=new Array();
    var bubby=new Array();
    var bubbs=new Array();
    window.onload=function() { if (document.getElementById) {
    var rats, div;
    for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
    rats.style.visibility="hidden";
    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)";
    document.body.appendChild(rats);
    bubb[i]=rats.style;
    }
    set_scroll();
    set_width();
    bubble();
    }}
    function bubble() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
    bubb[c].left=(bubbx[c]=x)+"px";
    bubb[c].top=(bubby[c]=y)+"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;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[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";
    bubb[i].left=bubbx[i]+"px";
    }
    else {
    bubb[i].visibility="hidden";
    bubby[i]=0;
    return;
    }
    }
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sleft;
    x=(e)?e.pageX:event.x+sdown; }
    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() {
    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;
    }
    }
    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>

Contoh hasil script gelembung ini bisa anda lihat disini 


Untuk warna merah ( #FF9900 ) merupakan ukuran kode warna dan itu bisa anda ganti sesuai selera anda

itulah cara memasang script gelembung pada blog semoga bermanfaat dan menambah indahnya pada blog anda


0 Response to "Cara membuat efek gelembung bertaburan di blog"

Post a Comment

Silahkan berkomentar yang relevan dan jangan melakukan SPAM atau meninggalkan link hidup demi kebaikan dan terjamin keindahan dalam persahabatan.