How To Add Snow In The Background of Your Blog Using CSS

Today we're going to look at a very simple CSS trick that can be used to create snow on a Blogger blog. Looks really cool because it doesn't require any scripts, just CSS and three thumbnails.

The advantage of this method is that the blog is not reloaded without the use of scripts, the disadvantage is that users who do not have modern browsers will not be able to view it (works for Internet Explorer 10 and higher).

There will be snow in the background of the blog, which not only does not detract from the links or content (because the folds are images), but also blocks the visibility of the blog content.

demonstration

How to Add Snowfall to Blogger Blogspot

Step 1. Go to "Templates" and click the "Edit HTML" button:

Step 2. Click on the little arrow on the left ... Click anywhere in the code area to expand the styles (Screen 1) and use CTRL+F to find ]]> lighthouse (screen 2)

Step 3. Add the following code just above:

/* Avalanches for bloggers
-------------------------------------------------- ----------*/
@keyframe snow {
0% {background position: 0px 0px, 0px 0px, 0px 0px;}
100% {background position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframe snow {
0% {background position: 0px 0px, 0px 0px, 0px 0px;}
100% {background position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background position: 0px 0px, 0px 0px, 0px 0px;}
100% {background position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframe snow {
0% {background position: 0px 0px, 0px 0px, 0px 0px;}
100% {background position: 500px 1000px, 400px 400px, 300px 300px;}
}

#snow {
background image: URL (https://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png), URL (https://4.bp.blogspot.com /-8FLVL8/ UaJZY1tUptI/AAAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png), URL (https://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAAADfE/0Lp5c/sd06/snow3.png).
- webkit animation: snow 20 linear infinity;
-moz animation: 1920s endless linear snow;
-ms-animation: 20 seconds endless linear snow;
Animations: snow 20 linear infinity;
}

Screen 1:

Screen 2:

Step 3. Now we are looking for (CTRL + F). Bookmark it, or if you can't find it, look for the line below:

Step 4. Right below the tag, add the following:

Step 5. Finally, find the closing tag and add this tag right above it: