How To Add Snow Falling Background In Blogger Prajjwal Rajput Sunday, June 29, 2014 No Comment

Hello Friends we're previously provide a useful posts and this post tag to comments many Blogger read this posts and give the good feed back for this posts to me if you are not see this post so don't worry to read this Facebook & Blogger Comments Inside the Tabs For Blogger post after this posts. So today's tutorial are about the personalize of blogger blogs and make the more attractive and more beautiful blog. When your visitor visit your blog then he/she cam imagine that their blog has so simple not a featured blog, their blog has old fashion type this is big problem to lose their visitors every day and every time. If you know to increase your page views and decrease your bouncing rates this to make your blog attractive and beautiful. Then start to read today's post that is how to add snow fall background in blogger blogs.

This is a elegant and best for winter season when the winter season is coming then your blog suite to this season and this background help to gain more comments for this beautiful background this is the best thing it is not required scripts, its just only run on CSS with some snow fall object images.

The advantage of this background that by not using any scripts and doesn't make the overload blog and it does not effect to your blogger page speed, means this CSS plugin not decrease your blog opening speed but its bad thing that is not work in Internet Explorer 9 or before.

This snow fall background  for the blogger blog, it is not change effect of your blog, it change just only your background its not affected to your blog post body and sidebar widgets. If you can see this plugin's Demo so click this live demo button to see this snow fall background demo

LIVE DEMO

• Recommended : How To Install Google Analytics In Blogger Blogs

How This Works?

After you can see this background's demo that we're using CSS to make this Plugin. You will see the falling snow little balls continuously in real way this is not a real animation image, this just only three image of sort by size white little balls this snow fall attract more visitors to your blogger blog. This Plugin was made up of Pure CSS mean Cascading Style Sheet.

How To Install Snow Fall Background In Blogger Blogs?

After you can understanding know about this background and its features so let's start to install this beautiful snow fall background in blogger blog.

• Go to Blogger Dashboard>>Template>>Edit HTML
• Search this below code using (Ctrl+F)

]]></b:skin>

• after found this code 
• Add this below code above ]]></b:skin> 

 /* Snow Fall Background By-NBT 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;}
}

#NBT-snow-falls {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_OPRxZj6MyR9N-n277dnUYKT_DG8vuiN_4qeajbC5mB1S_wH5R6kIgPrnJPrNHQJs9CrqywgPvVHPBwegK7OQKaQnRUbprJezTTq-n0yiBVRL-GCLFxFzEXka5esco2x7W7qJl4ucf3j/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJ7KpYl9I26IxWOjfpj9IbpFqlLZrg_tsfBHoGm-clBaf0dgFHQNuIlwf213Dh4zTQbNnqNqMH4RJ9KA-g_elcZXjnxqZimmH3QWe5fV4lxPqNzjTjtt6fVAuWT7XZ1EbDWsA6u-0hFcS/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdq87SIeGbbCvboul6qozKNInIF4xIafBRu0_KU9Sstre7JPbsW3TmW8P1sYz6RyBL6DY92HeblmkMxbZL2EhuyaufN7yGgBkNO7jekcfVfMyMr0EB6gigSIFzccohN0L3i65M0N_Vuqti/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;
}

• Now find this <body> tag using (Ctrl+F) 

Note : If you cannot find this tag or If you are using official default blogger template then search this below code.

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

•  After Finding the properly body tag 
• Then, paste below given code, Just the below of above code.

  <div id='NBT-snow-falls'>

• Finally, find this below tag.

</body>

• And paste the below given code just above </body>

</div>

• Click On "Save Template"
• You've done.

Customization:-
Don't forget to use dark or related to winter images in your blogger blog background because this snow fall doesn't show in white background.

Final Words

 So friends this is most elegant snow falls background. I hope this tutorial is helpful for you and if you're facing any problem then please leave comments for your solution and don't forget to like our facebook page and also share this post on social networking sites with friends.
Happy Blogging!

Tweet

Tags: Blogging Tips / Tutorials