How to Add Snow Fall Effect on Blogger Images

Hi to all, here I am going to tell you all about how to add snow fall effect on blogger images easily in just few minutes by using CSS and JavaScript.

By adding the snow effect on your blog, you will add more wah to your website visitors, and will attract them to click on the images.

You can use the below provided codes in any blogger templates, and also you can use these codes in other websites too, without any error or issue.

Read the below steps carefully and completely, if you miss any one step then you will definitely get error while saving the code in your blogger theme editor section, so read this article completely.

Add Snow Fall Effect on Blogger Images

Step-1: First of all, you need to login to your blogger website dashboard by using your website login credentials.

Step-2: Go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme.

Step-3: Again go to blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor.

Step-4: Copy below provided CSS code and paste copied CSS code above ]]></b:skin> tag or </style> tag.

/*Latest Snow Effects */ .snow{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20} .contentz{height:100%;position:relative;overflow:hidden;z-index:1}
Copy

Step-5: Now copy below provided JavaScript Code and paste copied JavaScript code above closing body tag or </body> tag.

<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("snow"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}(); //]]> </script>
Copy

Step-6: After adding the two codes, click on save button.

Step-7: It will take few seconds to process the theme code, after successful processing, you will get a message displayed in the screen i.e. Updated Successfully.

Step-8: Now you have successfully added snow fall effect on blogger images easily in just few minutes.

Note

If you get any issue or errors while saving the code in theme editor section, then you need to restore your backup code again and need to repeat the same process as mentioned in above steps carefully.

If you want to change any style or color, then you can modify or change CSS code as given in step-4.

Conclusion

I hope that you have understood about how to add snow fall effect on blogger website easily in just few minutes by using CSS and JavaScript.