Hey there! I'm back again with a new crispy guide/tutorial for you. In this particular article, I'll tell you about the pros and cons, features and steps to make a snow effect in blogger. So, let's start the tutorial.
Pros and Cons Of Snow effect
Before we get start , let me tell you exact pros and cons of this snow effect in blogger. I will tell you what will the effect and this is your choice whether it is good for your blog or not.
Pros:
The pros of snow effect in blogger are;
1) Using a snow effect in blogger can make your blog more effective and more pretty.
2) The size and number of snow can be adjusted as per your requirement. Just modify the "createParticles" Function which is responsible for the number and density of the snow.
3) You can change the color of the snow ball. When you make the color of the snow as like your theme color , it will make your blog more effective.
Cons:
1) It may be Increase the size of your page and css that may lead to reduce your page load speed by 0.001s (This is not a big problem)
2) May be , some your visitors doesn't like your snow effect in blogger.
3) It may be looks cheap if you increase the density or unmatched color.
Features of snow effect
I try to provide all the possible features of the script that I'm providing you of snow effect in blogger;
1. Realistic SnowFall
This script will show up a realistic SnowFall that will look a shining dots in your website. It will looks so pretty of your adjust it's color as per your theme color.
2. Adjustable Density
In the script, the "createParticles" leads the density of the snow effect. You can adjust it by changing the script codes.
3. Responsive Design
The script will maintain the responsiveness in your blog. It will work in all the screen size from a mobile screen to a computer screen without any fault or failure. It will resize automatically as per the screen resolution. `resizeCanvas` function is responsible for all the sizes and your can change the size as per your requirement.
4. Smooth Animation
The script also has a smooth Animation. This will not hang or make a lag in your website that looks cheap. `window.requestAnimationFrame` function is responsible for the animation and can adjust as per your requirement.
5. Transparency and Opacity
The snow effect makes the perfect Opacity and transperent effect in your blog. But if your want to change the Opacity and transperency, then you can change the `context.fillStyle` function.
How to add snow effect in blogger
If you want to add a snow effect in your blog then follow these simple steps.
1) Open Your Blogger Dashboard on Blogger.com
2) Go to Layout Section.
3) Click on Add A Gadget.
4) Choose HTML/Javascript Option.
5) Paste All The Given Below Codes.
5) Save The Changes and View your Blog.
1. Open Dashboard
First of all, On blogger.com , Go to your blogger blog dashboard In which you want to add the snow effect. For this , click on left side menu icon and choose the blog , you want to customize with these codes.
2. Go to Layout Section
Secondly , Go to Layout Section of that blog. Here , if you want to show the snow effect in all website pages including home page them try to add a Gadget at the footer
 |
| Screenshot of Own blog Layout : Footer |
Or if you want to show the snow effect in blog post only , then add a Gadget in blog area. This can be shown below
 |
| Screenshot of Own blog Layout : Main |
you can add a Gadget any side here , either side bar or main area. After this the snow effect will only show up in blog post not on home page.
3. Add A Gadget
Now , if you decided whether you want to show up your snow effect in blogger. Then afterwards, click on add a Gadget option to implement the codes there.
 |
| Screenshot of Own blog Layout: Add a Gadget |
4. Choose HTML/Javascript Option
Now , For futher steps, After clicking on add a Gadget option, choose HTML/javascript option. In this area we will put the codes of snow effect in blogger.
 |
| Screenshot of Own blog Layout : Html option |
5. Paste All Codes There and Save Changes.
Paste all the codes below to show the snow effect in blogger blog. After pasting all the codes , click on save and then again click on save all changes icon , that is given down menu bar.
Snow effect HTML Codes:
<canvas class='snow' id='snow'></div> <style>.snow{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:920}.contentz{height:100%;position:relative;overflow:hidden;z-index:1} <script>!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>Conclusion
So I hope , you like this tutorial blog and I try to give my best to guide you on how to add snow effect in blogger with images of every step. You can also change the color , size and number of snows as per your requirement.
Thanks for visiting and reading.
Let us meet with a new tutorial.
Jai Hind, Jai Shree Ram!