Cara Pasang Bubbles Di Blog

Cara Pasang Bubbles Di Blog

      Kali ini Saya Akan Berbagi Tutorial Blogger Yang Saya Kreasikan Sendiri Untuk Sobat Coba Dan Yang Pasti Akan Membuat Nuansa Halaman Blog Sobat Akan Menjadi Lebih Indah Dengan Adanya Bubles (Gelembung) Yang Berterbangan Disekitar Area Blog.

Anda Tertarik ?
Silahkan dicoba . . .

Nah Buat Sobat Yang Tertarik Silahkan Ikuti Tutorial Dibawah!

  1. Pertama Silahkan Sobat Login ke Akun Blogger.
  2. Masuklah Ke Rancangan Lalu Pilih Elemen Laman.
  3. Sekarang Sobat Tambahkan Gatget Baru Dan Pilih Yang HTML/Javascript.

  4. Bila Sudah Silahkan Sobat Salin Semua Kode Dibawah Dan Taruh Pada Jendela HTML/Javascript Yang Sudah Terbuka Tadi.
    //<![CDATA[
    var Ymax=8; //MAX # OF PIXEL STEPS IN THE “X” DIRECTION
    var Xmax=8; //MAX # OF PIXEL STEPS IN THE “Y” DIRECTION
    var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

    //FLOATING IMAGE URLS FOR EACH IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH “0” !!

    var floatimages=new Array();
    floatimages[0]=’http://3.bp.blogspot.com/-icIt0JxPwps/TwvreCTpEPI/AAAAAAAADNg/MHC3GMnlDCI/s400/filiex-bubbles%2B1.png&#8217;;
    floatimages[1]=’http://1.bp.blogspot.com/-f7bRGWN7kUM/TwvreWz6imI/AAAAAAAADN8/UZ49T9_64iM/s400/filiex-bubbles%2B3.png&#8217;;
    floatimages[2]=’http://4.bp.blogspot.com/-fdcJpTeYbeo/Twvrex6nrsI/AAAAAAAADOE/9onAGSPTf0k/s400/filiex-bubbles%2B4.png&#8217;;
    floatimages[3]=’http://3.bp.blogspot.com/-cf-oPTbqLe4/Twvrrn9DTJI/AAAAAAAADOw/JL3xse5FZ1I/s400/filiex-bubbles%2B8.png&#8217;;
    floatimages[4]=’http://4.bp.blogspot.com/-MRy9MXFaLLQ/TwvrrdsBP9I/AAAAAAAADOo/K-0889ZLxvc/s400/filiex-bubbles%2B7.png&#8217;;

    //*********DO NOT EDIT BELOW***********
    var NS4 = (navigator.appName.indexOf(“Netscape”)>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
    var IE4 = (document.all)? true : false;
    var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf(“Netscape”)>=0 )? true: false;
    var wind_w, wind_h, t=”, IDs=new Array();
    for(i=0; i<floatimages.length; i++){
    t+=(NS4)?’‘ : ‘

    ‘;
    }
    document.write(t);

    function moveimage(num){
    if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
    if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
    if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
    if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
    moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
    }

    function getnewprops(num){
    IDs[num].Ydir=Math.floor(Math.random()*2)>0;
    IDs[num].Xdir=Math.floor(Math.random()*2)>0;
    IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
    IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
    setTimeout(‘getnewprops(‘+num+’)’, Math.floor(Math.random()*Tmax));
    }

    function getscrollx(){
    if(NS4 || NS6)return window.pageXOffset;
    if(IE4)return document.body.scrollLeft;
    }

    function getscrolly(){
    if(NS4 || NS6)return window.pageYOffset;
    if(IE4)return document.body.scrollTop;
    }

    function getid(name){
    if(NS4)return document.layers[name];
    if(IE4)return document.all[name];
    if(NS6)return document.getElementById(name);
    }

    function moveidto(num,x,y){
    if(NS4)IDs[num].moveTo(x,y);
    if(IE4 || NS6){
    IDs[num].style.left=x+’px’;
    IDs[num].style.top=y+’px’;
    }}

    function getidleft(num){
    if(NS4)return IDs[num].left;
    if(IE4 || NS6)return parseInt(IDs[num].style.left);
    }

    function getidtop(num){
    if(NS4)return IDs[num].top;
    if(IE4 || NS6)return parseInt(IDs[num].style.top);
    }

    function moveidby(num,dx,dy){
    if(NS4)IDs[num].moveBy(dx, dy);
    if(IE4 || NS6){
    IDs[num].style.left=(getidleft(num)+dx)+’px’;
    IDs[num].style.top=(getidtop(num)+dy)+’px’;
    }}

    function getwindowwidth(){
    if(NS4 || NS6)return window.innerWidth;
    if(IE4)return document.body.clientWidth;
    }

    function getwindowheight(){
    if(NS4 || NS6)return window.innerHeight;
    if(IE4)return document.body.clientHeight;
    }

    function init(){
    wind_w=getwindowwidth();
    wind_h=getwindowheight();
    for(i=0; i<floatimages.length; i++){
    IDs[i]=getid(‘pic’+i);
    if(NS4){
    IDs[i].W=IDs[i].document.images[“p”+i].width;
    IDs[i].H=IDs[i].document.images[“p”+i].height;
    }
    if(NS6 || IE4){
    IDs[i].W=document.images[“p”+i].width;
    IDs[i].H=document.images[“p”+i].height;
    }
    getnewprops(i);
    moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
    if(NS4)IDs[i].visibility = “show”;
    if(IE4 || NS6)IDs[i].style.visibility = “visible”;
    startfly=setInterval(‘moveimage(‘+i+’)’,Math.floor(Math.random()*100)+100);
    }}

    function hidebutterfly(){
    for(i=0; i<floatimages.length; i++){
    if (IE4)
    eval(“document.all.pic”+i+”.style.visibility=’hidden'”)
    else if (NS6)
    document.getElementById(“pic”+i).style.visibility=’hidden’
    else if (NS4)
    eval(“document.pic”+i+”.visibility=’hide'”)
    clearInterval(startfly)
    }
    }

    if (NS4||NS6||IE4){
    window.onload=init;
    window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
    }

    //]]>

  5. Bila Langkah Diatas Sudah Selesai Silahkan Simpan.
  6. Lihat Hasilnya !
  7. Selesai

Cukup sekian utnuk Tutorial Blogger kali ini dan nantikan tutorial berikutnya.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s