2 Hiệu ứng tuyết rơi cho blog

Nhắc tới giáng sinh là ta sẽ nhớ ngay tới tuyết, tuyết đã trở thành đặc trưng của màu giáng sinh. Vậy làm sao để thêm hiệu ứng tuyết rơi vào blog cho có thêm không khí giáng sinh. Bài hôm nay của mình sẽ giúp các bạn thực hiện điều đó.

#Hiệu ứng hoa tuyết rơi

Hiện tại, trên blog của mình cũng đang sử dụng hiệu ứng này, nhìn cũng khá là đẹp.

1. Đăng nhập Blogger

2. Mẫu > Chính sửa HTML

3. Tìm thẻ </head>

4. Dán code dưới vào trên thẻ vừa tìm

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'/>
<script src='http://yourjavascript.com/61532113121/new-snofall.js'/>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
</script>

Lưu ý:

• Nếu chèn trên thẻ </head> mà không được thì bạn hãy chèn code trên vào trên thẻ </body>
• minsize là kích thước nhỏ nhất của bông tuyết, tương tự thì maxsize là kích thước lớn nhất của bông tuyết
• newon là tần suất rơi hoa tuyết, tần suất càng lớn hoa tuyết rơi càng nhiều và ngược lại
• flakecolor là màu của hoa tuyết

#Hiệu ứng hoa tuyết rơi và trang trí ở 4 góc màn hình

VIEW DEMO

1. Đăng nhập Blogger

2. Bố cục 

3. Thêm tiện ích > HTML/Javascript

4. Dán code dưới vào và save lại

<script type="text/javascript">
document.write('<style type="text/css">body{padding-bottom:20px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="http://3.bp.blogspot.com/-FIi2lhedZlM/UqUh7DiIQBI/AAAAAAAABw0/zGmBkOAzb6g/s1600/vbbstyle.net---top-left.png" _cke_saved_src="http://3.bp.blogspot.com/-FIi2lhedZlM/UqUh7DiIQBI/AAAAAAAABw0/zGmBkOAzb6g/s1600/vbbstyle.net---top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="http://3.bp.blogspot.com/-e1ht8cs_3Pc/UqUiMUGdW3I/AAAAAAAABw8/qyiyeOVv0cM/s1600/vbbstyle.net---top-right.png"/><div style="position:fixed;z-index:9999;bottom:-50px;left:0;width:100%;height:104px;background:url(http://1.bp.blogspot.com/-QMaoKtD-U74/UqUiYNtnz0I/AAAAAAAABxE/3BVD-f1E1uE/s1600/vbbstyle.net---footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:20px;left:20px" src="http://1.bp.blogspot.com/-Ss5kPDUVIbM/UqUikRK8PqI/AAAAAAAABxM/6fBmSCbU5lI/s1600/vbbstyle.net---bottom-left.png"/>');
var no=100;var hidesnowtime=0;var snowdistance='pageheight';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();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){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span><\/div>')}}function snowIE_NS6(){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){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>