How To Add Together Snowfall Inward The Background Of Your Weblog Using Css – Helplogger

Today we’re going to become over a super uncomplicated CSS technique that y’all tin purpose to arrive snowfall on your Blogger blog. It seems especially attractive since it doesn’t postulate scripts , exclusively CSS together with 3 modest images.

An wages of this method is that past times non using scripts doesn’t overload the weblog , the disadvantage existence that users amongst non then modern browsers , volition non survive able to meet it (in Internet Explorer plant for version 10 together with up).

The snowfall volition autumn inward the background of the weblog , which , inward add-on , preclude interfering amongst links or content (because the flakes are images) , also preclude blocking the visibility of the content of the blog.

How To Add Falling Snow To Blogger Blogspot

Step 1. Go to “Template” together with click on the “Edit HTML” button:

Step 2. Click the modest arrow on the left of … to expand the trend (screenshot 1) together with click anywhere within the code surface area to search past times using the CTRL + F keys for the ]]> tag (screenshot 2)

Step 3. Add the next code only inward a higher identify 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;
}

Step 3. Now , search (CTRL + F) the tag or if y’all can’t honour it , search this delineate of piece of job below:

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

Step 5. Finally , honour the closing tag together with add together this tag only inward a higher identify it: