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!

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

• 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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6aGiqeXJCQrnE0bMYsIZJDvkc4apjtwtDed7pDoeaWI-CBHXpaqdagoo_DcZSwdyj_10phBH7MCHtTwUfTwc4sdkTVu09bNF4nWjGrM3Tu_Tsh7Y5vAvCarpkyRgzimqkMRGC6FBILYad/s400/filiex-bubbles+1.png';
  floatimages[1]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ44OWfR94J7pKfRychwkYadsgfKibK9GILFf_sQWqfdRwZUZZbjpd7T5QNX9_bDc3Y9ucLTT0S4IwdsTj0b3KIZxOl-a3s3S1eKuyX6NgC-_-9GMRCUxq1XtXZMiWGIEO-bgAkSMfJm8a/s400/filiex-bubbles+3.png';
  floatimages[2]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPY_wFHfcrOAnVGdGLs8q-nB3uX3NBoAWhIH3ZHOhU7Bz4xiKFAwz1ycD9Gz6aooQcYVJc3CYxjp-rPrzKh3hXovOhhGXxUfwrW3kUob1rLoPR-thXyrNDiIVSfTyD_NIOwwDpArkzXRUr/s400/filiex-bubbles+4.png';
  floatimages[3]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRpy0ywASt5bt0hA_QCCD09sa0ZWriwUapxz09aohqnjx_An6kdsCAkSZX3KqR6u-7pFcYNNlQ89nEGqImnXm0LA_fJqqHvsfaL5pOn8KE0NG33_KwwokzvIyWszD6Ae-XyKyY8DwBWPD/s400/filiex-bubbles+8.png';
  floatimages[4]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUnu7LN0YPGZ9x29_wxPoOIj-Y2ojFS7qlux_3O8gCO7CnMBk_8UPvUKPNSyZDH7qRNkApuhTwIYGACLjgDOyzsVossvUrkS6j-YDZ5d-Wm-vlbxzLyL6USavch8ewocL02pNQOz2JHHMj/s400/filiex-bubbles+7.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>
  
  
  
• Bila Langkah Diatas Sudah Selesai Silahkan Simpan.
• Lihat Hasilnya!
• Selesai

SEMOGA BERMANFAAT