How To Add Together Snowfall Inwards The Background Of Your Spider Web Log Using Css

Today we’re going to teach over a super uncomplicated CSS technique that yous tin role to teach inwards snowfall on your Blogger blog. It seems peculiarly attractive since it doesn't demand scripts, exclusively CSS in addition to 3 small-scale images.

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

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

re going to teach over a super uncomplicated CSS technique that yous tin role to teach inwards snowfall on your How To Add Snow In The Background of Your Blog Using CSS

DEMO

How To Add Falling Snow To Blogger Blogspot

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

Step 2. Click the small-scale arrow on the left of <b:skin>...</b:skin> to expand the vogue (screenshot 1) in addition to click anywhere within the code surface area to search past times using the CTRL + F keys for the ]]></b:skin> tag (screenshot 2)

Step 3. Add the next code only 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIgPmpRRRuX83zlfgH6fTynsL3GltxYvKtELoKdN-21yYZXvLEH_LXNjjOebkcQKFm-hocUqZxuwuXKGkMzJyJP7AoHuVM2Ob5sqxegSDFIi2DdLNndgX-jmdag69wzLVhPxJ8ScBNzchu/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdT_T3fhFjTQXzK3e_G_MJgOpXzNDGwt74lTA-4Eal4G51bJhj8Y1LmgzenjZbIuXLHEJHSjIVHdTOvEj1vw5uFY9JZ35o90xzISRwnf7tkn8FZ7LhTatjTzwySxczS3qbeTCW27GjpS-7/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWNYuzLcG5O7lK8cq3uIfLzukO9QY8NVSXsck8uD_6UxQz18QA9PGBKStLvhz5_YdJZal32pajP4cjKlmtEX6y0KAh0TSE6rt_icRtK8cgyES2kk9XBvGcK36IZd5h8oqGRdnigIKFU4OO/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 <body> tag or if yous can't honour it, search this trouble below:

<body expr:class='"loading" + data:blog.mobileClass'>

Step 4. Just below the tag, add together this:

<div id='falling-snow'>

Step 5. Finally, honour the closing </body> tag in addition to add together this tag only inwards a higher house it:

</div>

Step 6. Save the changes in addition to that's it. Enjoy! :)

As yous tin run across this tricks is rattling uncomplicated in addition to slowly to install, does non block the visibility of blog's content in addition to nearly important, it has no scripts, exclusively CSS in addition to cipher else.