Cách tạo hiệu ứng tuyết rơi, cây thông noel cho WordPress, Blogspot

Cách tạo hiệu ứng tuyết rơi, cây thông Noel trên website, blogspot, wordpress,… Giáng sinh 2015

Không khí Noel đã tràn ngập trên khắp các con đường để hưởng ứng phong trào Noel thì chúng ta hãy cùng trang trí trang web của mình thêm sinh động với hiệu ứng tuyết rơi nhằm hưởng ứng phong trào, ngoài ra tăng thêm phần thú vị khi các độc giả của chúng ta ghé vào Blog. Chỉ với một vài bước cơ bản là bạn có thể tạo được một điểm nhấn thu hút người đọc và chúng ta cùng xem cách tạo hiệu ứng tuyết rơi trên Blogger, Wordpress, Wesbsite,… như hình bên dưới .

Hôm nay mình xin chia sẻ hiệu ứng tuyết rơi, cây thông noel cho Wordpess, Blogspot, Website,… để các bạn có thể trang trí cho Blog hay Website cho kịp với xua hướng mùa Noel sắp về. Mùa noel bắt đầu tràn ngập trên các phố phường bạn đừng quên tạo hiệu ứng tuyết rơi, cây thông noel cho Blog, Website của mình nhé.

Demo online tại 24hchiase.com này hoặc xem ảnh nhé :D

Đối với WordPress và Website HTML:
copy code này chèn dưới thẻ

<script type='text/javascript'>//<![CDATA[ document.write('<style type="text/css">body{background:#f5465a;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8pNvZsV9rn6REMJ1sT_Y9upvxvWlujsG8hkIJSOsbaPOcpEuyF5ibkvvBkg4QT1NEr4yZ-f1e_0eAcT1llYludihco2Z_D8X5ddrToqRZlw8xYw-4OkXztVB8LeFLXnyjwYju96dpjg/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Vbn-n3IwRM531hE7QkZMBQN87ehJv4nad0mA0i8AiPqPCVP0wW_NVOzei1VttsZqF-TQrHUMQkhCOlxriBXPR11C-ThWqHceHnCtPbXrg0BOZCsIWYC6skZwPZ_d8iO4yb8RFoMzG5s/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://smartbb.googlecode.com/svn/trunk/dgm-footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdL4w4lMAoZmZYQRnZCNxYqUx2_DMNfDpGpefDZFrgrlKqZXIURMkj9ixCKngTQJzEy5LNALnCIvxWJbS_Gi87bLMG0HXxL3bWDxXSZ733GXy41Z1MS4aPQH8SkXx1Z_1qNK7IMfC-CMc/s180/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>

Đối với Blogger -Blogspot:
Đăng nhập vào nơi quản trị Blogger sau đó vào phần Bố Cục, thêm vào một tiện ích HTML/Javascipt và chèn code này vào:

<script type='text/javascript'>//<![CDATA[ document.write('<style type="text/css">body{background:#f5465a;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8pNvZsV9rn6REMJ1sT_Y9upvxvWlujsG8hkIJSOsbaPOcpEuyF5ibkvvBkg4QT1NEr4yZ-f1e_0eAcT1llYludihco2Z_D8X5ddrToqRZlw8xYw-4OkXztVB8LeFLXnyjwYju96dpjg/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Vbn-n3IwRM531hE7QkZMBQN87ehJv4nad0mA0i8AiPqPCVP0wW_NVOzei1VttsZqF-TQrHUMQkhCOlxriBXPR11C-ThWqHceHnCtPbXrg0BOZCsIWYC6skZwPZ_d8iO4yb8RFoMzG5s/s150/top-right.png"/><div style="position:fixed;z-index:9999;bottom:0;left:0;width:100%;height:104px;background:url(https://smartbb.googlecode.com/svn/trunk/dgm-footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdL4w4lMAoZmZYQRnZCNxYqUx2_DMNfDpGpefDZFrgrlKqZXIURMkj9ixCKngTQJzEy5LNALnCIvxWJbS_Gi87bLMG0HXxL3bWDxXSZ733GXy41Z1MS4aPQH8SkXx1Z_1qNK7IMfC-CMc/s180/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>

Sau khi lấy và gắn Code tạo hiệu ứng tuyết rơi vào tiện ích bạn hãy lưu lại, xem Blog mình có thay đổi gì không nhé.
Lưu ý nhỏ là nên chèn code vào 1 tiện ích html/js đã có trên website rồi cho đỡ bị thừa ra nhé.
Hiệu ứng ông già noel cưỡi tuần lộc chạy quanh website
Dưới đây chúng ta sẽ tạo ra một ông già noel cưỡi đàn tuần lộc chạy quanh website. Cái cảm giác trên website có một ông già noel chạy quanh website thật tuyệt vời, tạo ra một không khí noel thật sự trên website của bạn.