Hiệu ứng hoa, lá, tuyết rơi,... trên nền blog

Ảnh minh họa

Nếu một ngày bạn thấy blog mình quá đơn điệu, và muốn thêm một chút sinh khí cho blog, như tuyết rơi trên blog, lá rơi, hoa rơi,… thì thủ thuật sau sẽ giúp bạn việc này. Thủ thuật thích hợp cho những ai muốn làm đẹp hơn cho blog.

Lưu ý: Ở lần load trang đầu tiên, ảnh sẽ rơi một lượt từ đầu trang cho đến cuối trang thì mới rơi tiếp lại từ đầu. Sau đó sẽ rơi liên tục, đều đặn và riêng lẻ, trông sẽ tự nhiên hơn và đẹp hơn lần rơi đầu tiên.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Page Elements (Chỉnh sữa trang) > Add a Gadget (Thêm tiện ích)

- Chọn thêm tiện ích HTML/Javascript và dán đoạn mã sau vào:

<!-- Hiệu ứng hoa, lá, tuyết rơi,... cho blog -->
<script type='text/javascript'>
//<![CDATA[
  var snowsrc="LINK HÌNH" // Thay Link hình của bạn vào đây
  var no = 20; // Số ảnh rơi trên blog
  var hidesnowtime = 0; // Số giây ảnh biến mất sau khi rơi
  var snowdistance = "pageheight"; // Có thể thay đổi giá trị pageheight thành windowheight 

///////////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;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  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)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    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 (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>