1. Home
  2. Blog Design
  3. css
  4. how to
  5. How To Add Together Snowfall Inwards The Background Of Your Weblog Using Css

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

2:53:00 PM
Today we’re going to larn over a super unproblematic CSS technique that yous tin role to larn inward snowfall on your Blogger blog. It seems especially attractive since it doesn't necessitate scripts, alone CSS in addition to 3 minor 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 in addition to hence modern browsers, volition non endure able to come across it (in Internet Explorer plant for version 10 in addition to up).

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

re going to larn over a super unproblematic CSS technique that yous tin role to larn inward 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" in addition to click on the "Edit HTML" button:


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

Step 3. Add the next code simply higher upward 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/AVvXsEhMo7zQQlaZZR3SjxEtHCdMq7BFq4CtYGWGX2lyvcq9TUkOdqwUf12nP2ueBu2fc731w2hmBDWYvcI44L3FXFyHNF1yJ451g5WMFpCaUQGqP0e1vjXDEYzmZGrgy65ue0_PiWnRZ9d8lJx-/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixHICoLm2TeUh6lvrl6TbRJg4YgYqgq1WNW6KBmHFAhbTzKO6j8eNjvyox99RwmV64vlvSuwE3z35U3Eo2T3GI3-SeWOqG6jRJC6Lyea9Hhjq72z9UyPLl_8W16qg6dmMtAyR59NIyh3OZ/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSy-hTwm-B4CVYczM740_a5gXMG3aJAZUFLt5z0_QEs_Bfvbztx6dH8f3UKx3-5oL2YW-mF3VE_5pFBMYZEeapZdptITbPm0nk6AN7UQrBzS1SeunuQvyZfWfazTIJW-niXUzsKWlVFhN/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 discovery it, search this business below:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Step 4. Just below the tag, add together this:
<div id='falling-snow'>
Step 5. Finally, discovery the closing </body> tag in addition to add together this tag simply higher upward it:
</div>
Step 6. Save the changes in addition to that's it. Enjoy! :)

As yous tin come across this tricks is really unproblematic in addition to tardily to install, does non block the visibility of blog's content in addition to nigh important, it has no scripts, alone CSS in addition to zero else.

Comments

Subscribe to: Post Comments ( Atom )