Widget Burung Elang Beterbangan di Blog

Cara Membuat Burung Elang Beterbangan di Blog

Trik kali ini cara membuat animasi burung elang beterbangan di blog. Selain membuat tampilan unik dan menarik, animasi ini bisa membuat daya tarik tersendiri bagi pengunjung blog terutama penggemar burung elang. Buat anda para sobat blogger yang ingin mencobanya, silahkan ikuti tutorialnya berikut ini.

• Pada Dasbor, anda pilih Rancangan.
• Klik "Design" kemudian klik "Add New Gadget" setelah itu pilih "HTML/JavaScript".
• Copy-Paste kode HTML dibawah ini ke kotak postingan gadget.
  

  <script>
  if(typeof(jQuery) == 'undefined'){
  document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
  </script>
  <script language='JavaScript'>
  var no = 8;
  var speed = 15;
  var snowflake = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_tHD8FeZHlGMQrxB4HPHltkUAxcOe89Ia-T0NJwLBoq6X3nXfbwEjkLs8EB3njK9XxzGFEkm-VH8t8BwK-hi9wG9p2vPAcd1RFN01SZC1aa3BOkaNKmzVYXgjijen1DzuDtfJWbZXOY/s200/Hawk_Animation.gif';
  
  /*Created by MonozCore (2015) http://monozcore.blogspot.com*/
  var ns4b = (document.layers) ? 1 : 0;   /* Netscape4.x */
  var b4up = (document.all) ? 1 : 0;      /* MSIE4, Opera5, Netccape5 */
  var dx, xp, yp;                        /* coordinate and position variables */
  var am, stx, sty;                      /* amplitude and step variables */
  var imageobj;
  var doc_width = 900, doc_height = 850;
  if (!b4up) {
  if (ns4b) {
     doc_width  = self.innerWidth;
     doc_height = self.innerHeight;
  } else if (b4up) {
  doc_width  = document.body.clientWidth;
  doc_height = document.body.clientHeight;
  } else {
  b4up = 1;
  doc_width  = $( window ).width();
  doc_height = $( window ).height();
  }
  
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  imageobj = new Array();
  
  for (i=0; i<no; ++i) {                   /* iterate for every snowflake */
     dx[i] = 0;                            /* set coordinate variables */
     xp[i] = Math.random()*(doc_width-50); /* set position variables */
     yp[i] = Math.random()*doc_height;
     am[i] = Math.random()*20;             /* set amplitude variables */
     stx[i] = 0.02 + Math.random()/10;     /* set step variables */
     sty[i] = 0.7 + Math.random();         /* set step variables */
     if (ns4b) {                           /* set layers */
        $("body").append("<LAYER NAME=\"flake"+ i +"\" LEFT=\"15\" "
        + "TOP=\"15\" VISIBILITY=\"show\"><IMG SRC=\""
        + snowflake +"\" BORDER=0></LAYER>");
     } else if (b4up) {
        $("body").append("<IMG ID=\"flake"+ i +"\" SRC=\""+ snowflake
        + "\" BORDER=0 STYLE=\""
        + "position:fixed; z-index:"+ i +"; visibility:visible; "
        + "top:15px; left:15px;\">");
        imageobj[i] = eval (document.getElementById("flake"+i).style);
  }/*if*/
  }/*for*/
  
  function imageNS() {            /* Netscape4 main animation function */
     for (i=0; i<no; ++i) {      /* iterate for every snowflake */
        yp[i] += sty[i];
        if (yp[i] > doc_height-50) {
           xp[i] = Math.random()*(doc_width-am[i]-30);
           yp[i] = 0;
           stx[i] = 0.02 + Math.random()/10;
           sty[i] = 0.7 + Math.random();
        }/*if*/
           dx[i] += stx[i];
           document.layers["flake"+i].top = parseInt(yp[i]) + 'px';
           document.layers["flake"+i].left = parseInt(xp[i]) 
              + am[i]*Math.sin(dx[i])  + 'px';
        }/*for*/
     setTimeout("imageNS()", speed);
  }
  /*imageNS*/
  
  function snowDocument() {      /* MSIE4, Opera5, Netscape5 main */
     for (i=0; i<no; ++i) {      /* iterate for every flake */
        yp[i] += sty[i];
        if (yp[i] > doc_height-50) {
           xp[i] = Math.random()*(doc_width-am[i]-30);
           yp[i] = 0;
           stx[i] = 0.02 + Math.random()/10;
           sty[i] = 0.7 + Math.random();
        }/*if*/
        dx[i] += stx[i];
        imageobj[i].top  = yp[i] + 'px';
        imageobj[i].left = xp[i] + am[i]*Math.sin(dx[i]) + 'px';
     }/*for*/
     setTimeout("snowDocument()", speed);
  }/*snowDocument*/
  
  if (ns4b) {                   /* Netscape4 */
     imageNS();
  } else if (b4up) {            /* MSIE4, Opera5, Netscape5 */
     snowDocument();
  }
  }
  </script>
  

  
  Keterangan :
  
  Perhatian !!! Pastikan anda sudah memasang kode script JQuery.
• Simpan dan lihat hasilnya.