Table of Content

How to add Snow Falling Efffect on Blogger Website


Hi friends, welcome to Pixabinofficial blog. We are seeing one best
setup on your blogger website. Yes. It's named Snowfall Effect. This setup was
created simply on your blogger website. If you want to set up this script on
your blogger website. Follow this article still end. 

This snowfall is whether Design is helping to Create a beautiful Blogger Template. Because of this template like more visitors.

Benefits of Snow falling Effect?

  • Gives an Attractive Look.
  • Redesigned your blogger template.
  • Looks Beautiful look to after adding this Element.


 How to Setup Snowfall Effect on blogger Website?



Step 1: Go to Blogger Dashboard. 
Step 2: Open Theme Section and Click the "Edit HTML" Option. 


Step 3: Next find "</head>" Tag. And, Copy the Below CSS Script. 

Step 4: Paste the CSS script above on "</head>" Tag. 

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


Step 5: Next, find the </body>  Tag. and, Copy the Below Script and
Paste it Above on </body>  Tag. 

Step 6: Save the Temple. 

<div class='snowstech'>
<canvas class='techyball' id='techyball'></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("techyball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

Step 7: Now See Snow Fall Effect on your Website.

Video Guide👇









Final Words

We hope this Snow Falling Script is Helps to Design your Blogger Website. if you want to more information like This.  Please follow my Blog on Youtube, Google News, Telegram. 

Blogger & Developer, I'm sharing everything I've learned about optimizing WordPress websites for speed, and SEO tutorials. Read my bio to learn more about me. .

Post a Comment