Home » , » Pasang Bubbles Untuk Blog

Pasang Bubbles Untuk Blog


Dikesempatan 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. Tertarik?


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.

    <script type='text/javascript'>
    //<![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';
    floatimages[1]='http://1.bp.blogspot.com/-f7bRGWN7kUM/TwvreWz6imI/AAAAAAAADN8/UZ49T9_64iM/s400/filiex-bubbles%2B3.png';
    floatimages[2]='http://4.bp.blogspot.com/-fdcJpTeYbeo/Twvrex6nrsI/AAAAAAAADOE/9onAGSPTf0k/s400/filiex-bubbles%2B4.png';
    floatimages[3]='http://3.bp.blogspot.com/-cf-oPTbqLe4/Twvrrn9DTJI/AAAAAAAADOw/JL3xse5FZ1I/s400/filiex-bubbles%2B8.png';
    floatimages[4]='http://4.bp.blogspot.com/-MRy9MXFaLLQ/TwvrrdsBP9I/AAAAAAAADOo/K-0889ZLxvc/s400/filiex-bubbles%2B7.png';


    //*********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)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';
    t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
    t+=(NS4)? '</a></layer>':'</a></div>';
    }
    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(); }
    }

    //]]>
    </script>

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

Cukup sekian utnuk Tutorial Blogger kali ini dan nantikan tutorial berikutnya.
filiex Artikel Oleh Filiex Boy dari filiex.blogspot.com, yang telah
Diterbitkan di 3:35 PM
Label: ,
Jangan lupa berlangganan via RSS feed untuk artikel terbaru
Share this article :
Unduh Adobe Flash player

+ komentar + 1 komentar

January 30, 2012 at 9:14 PM

tanks broo ilmunya kerreen mantaaaaaaaaaaab n ni yg aq cari2... bodo amat blog aq jadi ga seo ato lola.. se x trims gan

Terimakasih epho atas Komentarnya di Pasang Bubbles Untuk Blog

Post a Comment