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 như hình bên dưới .
Bước 1 - Tạo hiệu ứng tuyết rơi trong 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 như hình sau.
Bước 2 - Code tạo hiệu ứng tuyết rơi trong Blogger
Copy đoạn code dưới đây chèn vào trong tiện ích mới vừa thêm trong bố cục và lưu lại.
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é.
Có một vấn đề như thế này, khi bạn thêm tiện ích nó sẽ hiện ra bên ngoài bố cục một mục trốn bên ngoài website do đó bạn có thể chèn đoạn Code ở phía trên trong một tiện ích HTML/Javascript đã dùng trước đó để khỏi bị thừa ra bên ngoài Blog của mình.
Với hai bước đơn giản là bạn đã có thể tạo được hiệu ứng mừng giáng sinh trên trang web của mình rồi, rất nhanh gọn với chỉ hai bước, chẳng cần phải biết gì về Code bạn cũng hoàn toàn có thể làm được. Chúc các bạn thành công!
Bước 1 - Tạo hiệu ứng tuyết rơi trong 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 như hình sau.
Bước 2 - Code tạo hiệu ứng tuyết rơi trong Blogger
Copy đoạn code dưới đây chèn vào trong tiện ích mới vừa thêm trong bố cục và lưu lại.
Mã:
<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="https://smartbb.googlecode.com/svn/trunk/dgm-top-left.png" _cke_saved_src="https://smartbb.googlecode.com/svn/trunk/dgm-top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://smartbb.googlecode.com/svn/trunk/dgm-top-right.png"/><div style="position:fixed;z-index:9999;bottom:-50px;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:20px;left:20px" src="https://smartbb.googlecode.com/svn/trunk/dgm-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é.
Có một vấn đề như thế này, khi bạn thêm tiện ích nó sẽ hiện ra bên ngoài bố cục một mục trốn bên ngoài website do đó bạn có thể chèn đoạn Code ở phía trên trong một tiện ích HTML/Javascript đã dùng trước đó để khỏi bị thừa ra bên ngoài Blog của mình.
Với hai bước đơn giản là bạn đã có thể tạo được hiệu ứng mừng giáng sinh trên trang web của mình rồi, rất nhanh gọn với chỉ hai bước, chẳng cần phải biết gì về Code bạn cũng hoàn toàn có thể làm được. Chúc các bạn thành công!
Nguồn: khoahocseo.vn
Hiệu chỉnh:
