Membuat Animasi Gambar / Photo Melayang Di Blog

Untuk anda yang senang dengan meriasi blog supaya tampil lebih menarik, Rudy Hartono akan berbagi cara membuat, memasang animasi gambar melayang di blog. pada postingan sebelumnya saya juga pernah share tentang memasang animasi burung twitter melayang, nah pokoknya judulnya ada melayangnya atau terbang. Bagaimana cara memasang animasi photo terbang pada blog, silahkan simak tutorial dibawah ini, untuk demonya silahkan anda terapin di blog anda sendiri, it's ok.

Cara membuat animasi foto terbang/melayang pada blog
1. Login ke Blogger
2. Pilih Tata Letak => Tambah Gadget
3. Pilih Html/Javascript dan masukkan kode dibawah ini.

<script type="text/javascript">var vmin=4;
var vmax=6;
var vr=4;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
 this.named=chipname;
 this.vx=vmin+vmax*Math.random();
 this.vy=vmin+vmax*Math.random();
 this.w=width+20;
 this.h=height;
 this.xx=0;
 this.yy=0;
 this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
   if (window.innerWidth || window.opera){
   pageX=window.pageXOffset;
     pageW=window.innerWidth-40;
     pageY=window.pageYOffset;
     pageH=window.innerHeight-20;
    }
   else if (document.body){
   pageX=iecompattest().scrollLeft;
     pageW=iecompattest().offsetWidth-40;
     pageY=iecompattest().scrollTop;
     pageH=iecompattest().offsetHeight-20;
    }

   chip.xx=chip.xx+chip.vx;
   chip.yy=chip.yy+chip.vy;
  
   chip.vx+=vr*(Math.random()-0.5);
   chip.vy+=vr*(Math.random()-0.5);
   if(chip.vx>(vmax+vmin))  chip.vx=(vmax+vmin)*2-chip.vx;
   if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
   if(chip.vy>(vmax+vmin))  chip.vy=(vmax+vmin)*2-chip.vy;
   if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

   if(chip.xx<=pageX){
   chip.xx=pageX;
      chip.vx=vmin+vmax*Math.random();
     }
   if(chip.xx>=pageX+pageW-chip.w){
   chip.xx=pageX+pageW-chip.w;
      chip.vx=-vmin-vmax*Math.random();
     }
   if(chip.yy<=pageY)
     {chip.yy=pageY;
      chip.vy=vmin+vmax*Math.random();
     }
   if(chip.yy>=pageY+pageH-chip.h)
     {chip.yy=pageY+pageH-chip.h;
      chip.vy=-vmin-vmax*Math.random();
     }

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";


   chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
  }
}

//Step 1: Define unique variable names depending on number of flying images (ie:1):
var flyimage

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage=new Chip("flyimage",47,68);

//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage");
}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

function close_bar1()
{
 //if done then close the progress bar pop-up window
 document.getElementById('flyimage').style.visibility = 'hidden';
}
</script>

<div id="flyimage" style="left: -400px; position: absolute;">
<a href="http://www.blogger.com/post-edit.g?blogID=2233714512413696391&amp;postID=6243668994371441867#" onclick="close_bar1(); return false;"><img border="0" src="http://i1163.photobucket.com/albums/q544/blogrudy/pocong_zps04775238.gif" /></a>
</div>

Semoga postingan ini dapat bermanfaat, happy blogging.