Home
Blogger Guide
Coding Guide

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. 

Post a Comment