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

falling snow, snow, winter background, bloggerToday 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.

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), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this 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/AVvXsEib1KBIV0mOU8e9YUuObd2NbTKyy68uZmbiz3RJq10cMB8qRLH3LrkBMdnOYS45ynBG9vuMJT3OY_TV6D5fOMNb8TGazllvlYNDR9zMvP0UaJBsrp11DXU9bZwIn1ETnMOLh29sZOAs5WeQ/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg0yXjsMy5I87SJgQEY-8QkHBNcMYi3Sb4_3UgBR8Dd29DNPnVqHGtkMB3ikpXgBQuQ9BaBMrBJbpKNbDuhA3mIWX3gQcpBWST4JwvRlFZc3FkC7slHMcq-wD31DrNYPCX0QtDAVcm0CTB/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0XxZfGylWMM4SNRsjtQDabQgTrszmioAzUplEQImvVoKEOtTBfav4oz4SYeyTccEiaKXXahfkFHyIt-OZgYGo0vstH9wholbDXVJ3lMWKYMxI5VYwVJjFmhSMhil_hRQRxWMBAAgNdZ-/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) for the <body> tag or this line:

<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 the best is that it has no scripts, only CSS and nothing else.

Dark Template

dark template helplogger

Before anything you need to backup the current template. This is very important so you can always go back in case you come across any error.

Backup Current Template


Go to your Blogger Dashboard, select your blog > click on the Template option on the left side, then press the "Backup/Restore" button.

backup restore blogger template

For downloading your current template, click on the Download full template button:

download full template blogger

Upload the Dark Template 


To apply the Dark Template > click on Browse, search for the xml file that you have downloaded, select it and then press on the Upload button:
upload blogger template

Settings


1. Edit the Main Navigation Menu

Go to Blogger, select Template > click on Edit HTML button and search for the html code below (press CTRL + F keys). After you found it, replace 'Link URL' (without the quotes) to the ULR/address of the link that you want to target, also change the title of the link.
<li><a href='Link URL'>Title 1</a></li>
Change these lines as well:
<li><a href='Link URL'>Title 2</a></li>
<li><a href='Link URL'>Title 3</a></li>
<li><a href='Link URL'>Title 4</a></li>
<li><a href='Link URL'>Title 5</a></li>
<li><a href='Link URL'>Title 6</a></li>
If you want to add another link, then simply paste this code just below the last line:
<li><a href='Link URL'>Title here</a></li>
Screenshot:


2. Change the format of the date header

Go to Settings => Language and formatting and choose the Date Header Format, as shown in the picture below:


3. Add the widgets

- Last Comments widget

Go to Layout > click on the "edit" link from the "Last Comments" gadget and paste this code inside the empty box:
<ul id="lastcomments">
<script src="http://your-blog-here.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments_avatar"></script>
</ul>
Replace http://your-blog-here.com with the url of your blog or site. Then save the gadget.

- Search widget

click on the edit link from the HTML/JavaScript gadget and paste this code inside the empty box:
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #121212;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #070707;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button:hover {
background: #282828;
}
#search-button {
border: 1px solid #121212;
position: absolute;
top: 0;
right: 0;
height: 38px;
width: 80px;
font-size: 14px;
color: #777;
text-align: center;
line-height: 38px;
border-width: 0;
background-color: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
}
</style>

<div id="search-box">
<form id="search-form" target="_top" method="get" action="/search">
<input id="search-text" type="text" placeholder="Search here..." name="q" />
<button id="search-button" type="submit">
Search
</button>
</form>
</div>
Screenshot:


Enjoy!