Rabu, 24 April 2013

Hujan Salju di Blog

Walaupun di negeri kita hanya ada dua musim yaitu kemarau dan hujan tapi di blog kita dapat ciptakan musim yang lain seperti halnya musim dingin/salju. Selain dapat mempercantik tampilan, kita juga bisa membuat pengunjung sedikit terhibur. Hujan salju di blog yang kita sajikan sesuai dengan musimnya akan membuat blog kita terasa 'dingin' dan pengunjung ingin berlama-lama menikmati salju buatan itu.

Berikut cara membuat hujan salju di blog:

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:


<script type="text/javascript">
      var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwHs-Sp_Pq20PHmYWzEZ-ZgL6jpr_PPHBtK1Ea7O7ejd2d10TEDBmY3b7LfDboAyzTtgaxzI0b-pdHOLBMFBUeVjh3giJUifwepqyhquggTKNsMHlpHG2ZOxmPA8TNaVQ0fAj7Hqb5Lsw/s400/snow.gif"
    var no = 15;
   var hidesnowtime = 0;
    var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
  var dx, xp, yp;   
  var am, stx, sty;  
  var i, doc_width = 800, doc_height = 600;
 
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwHs-Sp_Pq20PHmYWzEZ-ZgL6jpr_PPHBtK1Ea7O7ejd2d10TEDBmY3b7LfDboAyzTtgaxzI0b-pdHOLBMFBUeVjh3giJUifwepqyhquggTKNsMHlpHG2ZOxmPA8TNaVQ0fAj7Hqb5Lsw/s400/snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) { 
    dx[i] = 0;                       
    xp[i] = Math.random()*(doc_width-50); 
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;        
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();    
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      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();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }
       
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }
</script>

5. Simpan Setelan jika sudah.

Untuk widget salju ini tidak terlalu mengganggu pengunjung dalam melihat blog kita. selamat mencoba ;)

0 komentar:

Posting Komentar