Cara membuat efek hujan salju pada blog

Cara membuat efek hujan salju pada blog ini masih dalam putaran postingan yang lalu yang intinya adalah menghias blog sedemikian rupa supaya tampak lebih menarik. Saya membuat postingan ini karena banyak sekali blogger yang suka menghias blognya dengan aneka widget yang serba menarik dan sedap untuk dipandang mata. Mungkin sudah banyak para blogger yang membahas tentang masalah ini akan tetapi tidak ada salahnya juga saya membuat postingan serupa akan tetapi beda dari segalanya karena script yang saya tulis disini adalah masih script asli yang belum dimodifikasi kedalam bentuk file java script sehingga kodenya akan sangat banyak akan tetapi fungsinya sama saja dan tidak membuat loading blog menjadi berat.
Untuk Cara membuat efek hujan salju pada blog caranya adalah sebagai berikut:
** Cari kode </head> pada template anda dan jika sudah ketemu silahkan copy code dibawah ini dan paste di atas kode tersebut
<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var flakes=100; // number of flakes
var colour="#96c"; // colour of flakes
var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts

/***************************
*     Let It Snow Effect    *
*(c)2004-12 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh, boddie;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(baby_its_cold_outside);

function baby_its_cold_outside() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (var i=0; i<flakes; i++) {
    flks[i]=createDiv(3, 3, colour);
    flkx[i]=3*Math.floor(Math.random()*swide/3);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    boddie.appendChild(flks[i]);
  }
  setInterval("let_it_snow()", speed);
}}

function createDiv(height, width, colour) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min-3;
  shigh=sh_min;
  if (slush) {
    if (swide/3>slss.length) for (i=slss.length; i<swide/3; i++) {
      if (!slsh[i]) slsh[i]=3;
      slss[i]=createDiv(slsh[i], 3, colour);
      boddie.appendChild(slss[i]);
    }
    for (i=0; i<swide/3; i++) {
      slss[i].style.height=slsh[i]+"px";
      slss[i].style.top=shigh-slsh[i]+"px";
      slss[i].style.left=3*i+"px";
    }
    if (i<slss.length && slss[i].style.left!="-3px") for (; i<slss.length; i++) slss[i].style.left="-3px";
  }
}

function let_it_snow(c) {
  var i, x, o=0, z=0;
  for (i=0; i<flakes; i++) {
    flky[i]+=fldy[i];
 x=Math.floor(flkx[i]/3);
    if (slush) {
      o+=slsh[x];
      if (flky[i]>=shigh-slsh[x]) {
        if (x<swide && slsh[x]>slsh[x+1]+3) x++;
        else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
        slss[x].style.top=shigh-(slsh[x]+=3)+"px";
        slss[x].style.height=slsh[x]+"px";
  flky[i]=shigh;
   }
    }
    if (flky[i]>=shigh || flkx[i]>swide) {
   flky[i]=0;
   fldy[i]=2+Math.floor(Math.random()*4);
   flkx[i]=3*Math.floor(Math.random()*swide/3);
   flks[i].style.left=flkx[i]+"px";
   z++;
 }
 flks[i].style.top=flky[i]+"px";
  }
  if (o>flakes*slush) for (i=0; i<slsh.length; i++) if (slsh[i]>3) slsh[i]--;
  if (z || o>flakes*slush) set_width();
}
// ]]>
</script>
Jika sudah selesai jangan lupa simpan template anda dan biasakan melakukan sebelum meng-edit kode pada template.

Untuk contoh penerapan kode ini bisa anda lihat disini

Selamat mencoba dan semoga blog anda akan tampak semakin cantik dengan kehadiran widget ini.

Sumber kode: http://www.mf2fm.com/rv/dhtmlsnow.php

11 Responses to "Cara membuat efek hujan salju pada blog"

  1. Anonymous27/1/13

    artikel yang bagus sob..memang penting juga menghias blog agar pengunjung tertarik memnyimaknya..trimakasih...salam..

    ReplyDelete
    Replies
    1. salam kembali n makasih udah berkunjung n comment

      Delete
  2. Anonymous1/2/13

    bisa dicoba nih ^_^

    ReplyDelete
  3. Anonymous10/2/13

    .: ane juga pake...^_^

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. Makasih ya gan
    Moga blognya tambah maju

    ReplyDelete

PERHATIAN !...
*. Baca dulu artikel dan komentar yang ada sebelum Anda menulis komentar
*. Harap berkomentar dengan bijak dan sopan
*. Jika mengajukan pertanyaan, beri centang pada kotak disamping tulisan "Beri tahu saya" untuk mendapatkan jawaban melalui email
*. Dilarang menyertakan "LINK HIDUP", "IKLAN" "SPAM" dalam komentar karena akan dihapus atau dimasukkan ke dalam Comment Spam