How To Add Together Snowfall Inwards The Background Of Your Weblog Using Css

Today we’re going to become over a super unproblematic CSS technique that you lot tin role to arrive snowfall on your Blogger blog. It seems peculiarly attractive since it doesn't request scripts, alone CSS too 3 pocket-sized images.

An wages of this method is that past times non using scripts doesn't overload the blog, the disadvantage beingness that users amongst non too then modern browsers, volition non live on able to run into it (in Internet Explorer plant for version 10 too up).

The snowfall volition autumn inwards the background of the blog, which, inwards addition, foreclose interfering amongst links or content (because the flakes are images), too foreclose blocking the visibility of the content of the blog.

re going to become over a super unproblematic CSS technique that you lot tin role to arrive snowfall on your  How To Add Snow In The Background of Your Blog Using CSS



How To Add Falling Snow To Blogger Blogspot

Step 1. Go to "Template" too click on the "Edit HTML" button:


Step 2. Click the pocket-sized arrow on the left of ... to expand the trend (screenshot 1) too click anywhere within the code expanse to search past times using the CTRL + F keys for the ]]> tag (screenshot 2)

Step 3. Add the next code merely inwards a higher house it:
/* Snow falling for Blogger
----------------------------------------------- */
@keyframes snowfall {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

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

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

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

#falling-snow {
background-image: url(https://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png), url(https://4.bp.blogspot.com/-8RALuvldFh8/UaJZY1tUptI/AAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png), url(https://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAADfE/0Lp5NLrudxc/s1600/snow2.png);
-webkit-animation: snowfall 20s linear infinite;
-moz-animation: snowfall 20s linear infinite;
-ms-animation: snowfall 20s linear infinite;
animation: snowfall 20s linear infinite;
}
Screenshot 1:


Screenshot 2:


Step 3. Now, search (CTRL + F) the tag or if you lot can't detect it, search this describe of piece of job below:
Step 4. Just below the tag, add together this:
Step 5. Finally, detect the closing tag too add together this tag merely inwards a higher house it:
Step 6. Save the changes too that's it. Enjoy! :)

As you lot tin run into this tricks is real unproblematic too slowly to install, does non block the visibility of blog's content too to a greater extent than or less important, it has no scripts, alone CSS too nix else.