Widget Animasi Bidadari Di Blog

Membuat tampilan blog dengan efek falling angel / devil yang menarik dan unik. Efek ini menggunakan javascript falling image dengan menggunakan gambar Angel / Devil. Gambar Angel / Devil menggunakan ukuran tinggi 144 pixel dengan format Gif / PNG untuk contoh seperti yang terlihat pada postingan artikel ini.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.

Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.

<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/AVvXsEiNCjH2FU5bk6lCEsE6TNrHMqxXAzcpJPfeE0bSFRnjYxecApEZVFWbADsxJzd0lsngDWMrqKIDlIfRWiUoNleZRkrpIB7ZugUYeUmWJh7rn9R8ZeFjNLGd6VOeNZbvv2OjKEyN6XNxKcEg/s800/Angel.png';
/*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 :

var no = 5 // Jumlah gambar yang ditampilkan.
var speed = 10 // Kecepatan gerak gambar (semakin kecil semakin cepat).
var snowflake // URL link gambar.

Klik "Save" dan lihat hasilnya...

Pilihan Gambar Bidadari

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadDSGAmVoncqZBbzDBM7XBI8NbWcvamIn5VcMjij-_6dprfKtxTMLdntL_jMu1IbAJDO-m-Qbnr-uDVq1hta_G63TxERkDLceeuB1-nCCJLvw6ZJqRHmNUP8drL_IAzPxW7cEy9OZWSji/s800/wonderwoman02.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPgO3WzmlkJIy0QHw8UJKWitJIUK-zYUsfAKLUuf4aXgGU9QDWzWdnBk38YxeJVlZlX9Mw-CoikJtnh9MGuSPUpgsLnEcUYVHOnR_8PJs1s_xQhJMQAG2-TINml2mCiR5wnupnKirtFTq/s144/Pixie.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNCjH2FU5bk6lCEsE6TNrHMqxXAzcpJPfeE0bSFRnjYxecApEZVFWbADsxJzd0lsngDWMrqKIDlIfRWiUoNleZRkrpIB7ZugUYeUmWJh7rn9R8ZeFjNLGd6VOeNZbvv2OjKEyN6XNxKcEg/s800/Angel.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQhnjg1CcYeXiDbgLWdSRHPJw0FxSnv_HIQ4FNQqB2wmOOf5FdzBNArtK1Cit764c4rAc_yCqY7MLGv4Dl2mx5yCHpy3-kKaB_zr3yS1lAdFqJv3CX8fllF_KkKCEizwdRd4WtBpViEFV/s144/Vampire1.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7aI_dw92_3MBmzHMX_TLpAp77Yzav8Nbv7dbVvWHR2kqAPYPOGPfLVF3WMIPRmg8vsJuqsFYYcvQaZCW6WEBtijB7_X8QEhyIOGQFS7n20-riXIi83D02VnvPkuUWNPPtadYFBkYyW6gD/s800/Demon.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyAh7pX_73C06GTK5em8E-B4zZn6krkrhGs603UbUaQEJzuds7td1kBtIQUWqYZxiKfugln4N4gOd0nOy9tZaM-nBpgOZlMSpZgfAYYQB6u0uu62-6z1zR35GrSqSsRiKOiREKjCTLVpGB/s800/new_wonderwoman.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGa5QuWQs7-XbX7h-E_OhdZtNBy9G1x_NShDyYFGzCYk4rSTLDzpjMxt88c22yrJBRLSTsKAf0l75wW0EcmRc63mDr0z4Wh3uOlC1w44xs1HtM1nQpRKuB6nIkoQ26axKmnuZI7OmpdX4V/s800/sexy-bat-girl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0GNOESKDVPn_1Pe2zLVNFwfiDXBn2lTzghSPLNoKYbBv7Ti58BtvlBwjBMhThsFzjT4RQRI4F-FhNN25hfa5NmW6t879fbms18BVWHdXxr1VyJzgsVmkypGwc0vcNHt-JHfOaq4QOPdXt/s800/Vampire2.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLuzix7FxzF-urSVtTDCEIAlFpzXN7j6PRBCI4_Y-rN60JhorQBP6mtfJcuJfsSBihr9VRGo_zwzbki4i93V40B2Fu8t3lH9CEIAGfLeQTIiKyyB70f5TkPhaCtPLm7gdnaxHcWnpbww1/s800/pink-butterfly.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGHtBC5_vpV75rjLvKvpI-m5_fj6tWD2Ss9NE-gHpJsC-DMFhlRdqs8Ce382ayN3OwBMnMttCZH0iANJCL8IhkgPOagw_A-03F-KUuUDISNEEFyOmaM8KumYcSSH9roDCXG1ebHjv6Kx83/s800/BatGirl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_sNuPV9hc1tTWdu78wY0G3ZPyXyjKIDsQnNc7FihjWoVxLzDzPUy4I2VTPChoHEoQImowphbIPh6vX189ns4TW79CK-PRIfRboPQ1mZF9o06unJEy4QKMYHTtgj7nrD4cdfQxAs0JAqh/s800/devilicious.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrlfIRi5wzn2QIRFxFAlNL9jYGqhrFwBdNk7Vm3uJaLvNrnLC-vYBNz-LSX-7tdUnCMtpWng4Rg9ZY1-3GS2O6DHfP7pyFEt8oK6_iAaGLZvafwwfIMNHtT8gGFvDwNg1lQ-rt0E1Fl3kz/s800/redhotdemon.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj419twiZNAzIwrAGfq3_oi8hStxmNcTGMD9gcYIvzUhdBUL2KCk3EraWMoCl11OsxZ3b9m17UBH3qgxKDjTp_OI8Qpx8UP-YSCpA8GUrtld4b4r_2twDRaj45DtjEJAX-KqaQ6kFYp6KRX/s800/devil_angel_lolita.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvS9k93bUCw9YY4Z2sfQlKgBGDSyxAIlGyXc5QRzR5cTo8KFOmUS0VKnmjXqbcimkjxMxwXYiq_dCWIzAyl5qfED6NCQwygc7QcRhxQMo-UvrnMNLPOUZ-uTazuM6stExrOTT8abNeFTy/s800/Bianca_Wing.png