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

How To Add Snow In The Background of Your Blog Using CSS - Hallo Frend Helpful Tips, At this time sharing helpful tips entitled How To Add Snow In The Background of Your Blog Using CSS, I have been providing tips complete information with the latest information from the beginning until the end of the information . hopefully the contents of the posting helpful tips that I can write you understand. Okay , this is it Helpful Tips.

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

see also


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

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your Blogger blog. It seems particularly attractive since it doesn't require scripts, only CSS and three small images.

An advantage of this method is that by not using scripts doesn't overload the blog, the disadvantage is that users with not so modern browsers, will not be able to see it (in Internet Explorer works for version 10 and up).
The snow will fall in the background of the blog, which, in addition, prevent interfering with links or content (because the flakes are images), also prevent blocking the visibility of the content of the blog.

falling snow, snow, winter background, blogger

You can see the demo in this test blog.

How To Add Falling Snow To Blogger Blogspot


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


Step 2. Click the small arrow on the left of <b:skin>...</b:skin> to expand the style (screenshot 1) and click anywhere inside the code area to search by using the CTRL + F keys for the ]]></b:skin> tag (screenshot 2)

Step 3. Add the following code just above it:
/* Snow falling for Blogger
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes 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-keyframes snow {
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/AVvXsEhaNEiw6mv64Knbba8m-H3ebgXHbgqJoPjPiv6Z7RtVFo9LEykotfSVBErVJ-g4omlQNtkeu3Vry1FrfrFsXuL44o-H82yFCIEUwT-cHieTg1ub46zYwi3A-OtQtohasOPLcPr4VfgKO9iP/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWdnlhjUFz6rSA-Ga7FLfOCQiLst-8WYSevR7Q933I5602woMwnbjMmeXOw8rVCu1Y4qg9YTQ0VCPuEkNUHMxDQcEZ5mIz0mV6Ez8wTbwywHZFEWo4Ue8vcX9lk_RkDpp9Iw6MzlyRgis/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNd8uVqIwsWQHJGALWBG9HTNcoXoxTzuUD8l4iper62NrvEMmA0HNZlF89Jew8cISNzH-7UaercOkoHKo8vfVrnyQEj63xMoqFsz-vdcecjqmCUhApm1dMde6KCkk9RuCvRmCHqmChXLSO/s1600/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
Screenshot 1: 


Screenshot 2:


Step 3. Now, search (CTRL + F) the <body> tag or if you can't find it, search this line below:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Step 4. And just below, add this:
<div id='falling-snow'>
Step 5. Finally, find the </body> tag (CTRL + F) and add the following just above it:
</div>
Step 6. Save the changes and that's it. Enjoy!!! :)

As you can see this tricks is very simple and easy to install, does not block the visibility of blog's content and most important, it has no scripts, only CSS and nothing else.


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

Helpful Tips How To Add Snow In The Background of Your Blog Using CSS,hopefully can provide benefits to all of you . Okay , so this time posting helpful tips.

You are reading artikel How To Add Snow In The Background of Your Blog Using CSS and this article url permalinknya is https://tpistpis.blogspot.com/2013/12/how-to-add-snow-in-background-of-your.html Semoga artikel This can be useful.

0 Response to "How To Add Snow In The Background of Your Blog Using CSS"

Post a Comment