How to add snowfall effect to blogger

Kaconk.eu.org - In This Post, I'm going to Share How to Add Snow Effects in the Median Ui Template. This method can also be applied in templates other than Median Ui. This effect will beautify the look of your blog, and your blog will look alive with this snow effect.

But for some reason, the snow effect is so popular in today's blogging world that most people don't use it. Perhaps most people assume that the effects of snow can block the reader's view.

However, in this post, I will share a tutorial On How to add snowfall effect to blogger. Looks beautiful, does not block the reader's view. And it does not affect the process of loading the blog. If you want to apply it to your blog, please follow the way below.

how to add snowfall effect in blogger

1. Open Blogger Dashboard

2. Click Theme

3. Press the Inverted Triangle icon

4. Select Edit HTML

<!-- Snow Fall Effect Css By kaconk.eu.org -->
<style type='text/css'>
/* Snow Fall Effect Css By kaconk.eu.org */
.stm-snow-fall-container{height:100%;position:relative;overflow:hidden;z-index:1}
.stm-snow-fall{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
</style>

<!-- Snow Fall Effect HTML By kaconk.eu.org -->
<div class='stm-snow-fall-container'>
<canvas class='stm-snow-fall' id='stm-snow-fall'></canvas>
</div>

<!-- Snow Fall Effect JavaScript By kaconk.eu.org -->
<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("stm-snow-fall"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>