Hướng dẫn cách thêm hiệu ứng tuyết rơi cho blogspot

Hướng dẫn cách thêm hiệu ứng tuyết rơi cho blogspot


Xin chào tất cả mọi người và chào mừng bạn đến với Quang Linh Pro. Trong bài viết này, tôi sẽ hướng dẫn bạn cách thêm hiệu ứng bông tuyết vào trang web của một blogger. Hiệu ứng tuyết rơi trong blog được thiết kế bằng javascript và css.

Trên thực tế, hiệu ứng bông tuyết như thế này đã được sử dụng rộng rãi bởi các blogger cũ, và chúng thậm chí còn rất phổ biến vào thời điểm đó. Cho dù đó là một blogger mới bắt đầu hay một blogger thành thạo.

Hiệu ứng này sẽ làm đẹp giao diện blog của bạn và cũng sẽ làm tăng không khí của blog, làm cho blog trông sinh động hơn với hiệu ứng bông tuyết này của trang blog.

Tuy nhiên, không hiểu sao hiệu ứng bông tuyết trong thế giới blogger ngày nay lại không phổ biến, và chỉ có một số người sử dụng nó. Nhiều người có thể nói rằng thiết lập hiệu ứng bông tuyết là một người mới bắt đầu, hoặc nó cản tầm nhìn của người đọc.

Cách thêm hiệu ứng tuyết rơi cho blogspot

Cảnh báo: Trước khi bắt đầu hướng dẫn, hãy đảm bảo bạn đã sao lưu mẫu trước.

Thêm Mã Css Hiệu ứng Tuyết Rơi vào Trang web Blogger

  • Bước 1: Đăng nhập vào Blogger
  • Bước 2: Vào chủ đề, chỉnh sửa HTML
  • Bước 3: Ấn Ctrl F tìm đến thẻ </head>
  • Bước 4: Sao chép toàn bộ code bên dưới và dán trên thẻ</head>

<style type='text/css'>
/* Snow Falling Effect CSS Code */
.quanglinhpro.com{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.cont-quanglinhpro.com{height:100%;position:relative;overflow:hidden;z-index:1}
</style>

Thêm Mã Javascript Hiệu ứng Tuyết Rơi vào Trang web Blogger

  • Bước 1: Đăng nhập vào Blogger
  • Bước 2: Vào chủ đề, chỉnh sửa HTML
  • Bước 3: Ấn Ctrl F tìm đến thẻ </body>
  • Bước 4: Sao chép toàn bộ code bên dưới và dán trên thẻ </body>

<div class='cont-'quanglinhpro.com'>
<canvas class='Wendy code' id='quanglinhpro.com'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("quanglinhpro.com"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

Bây giờ hãy lưu chủ đề và truy cập trang web của bạn và kiểm tra xem hiệu ứng tuyết có hoạt động bình thường hay không.

Lời kết

Hy vọng bạn sẽ thích bài viết này. Đây là hướng dẫn tốt nhất về cách thêm hiệu ứng tuyết vào trang web Blogger. Nếu các bạn có thắc mắc hay khiếu nại bản quyền, vui lòng comment xuống phía dưới để mình biết nhé.

Copyright © Quang Linh Pro