Christmas the much awaited festival will soon knock on the doors of Bloggers and the entire world. Therefore, it is the time everyone should forget about their all concerns and start to decorate their blogs with awesomeness. Does anyone wishes to decorate their site with falling Snowflakes? If yes then, Christmas Eve would be an ideal time to show up some skills and amuse the readers by adding an animated snow falls to your blog. Now, few people might be thinking that, how we can create animated snowfall without even learning web developing. This is the reason why today in this article, we will be sharing a technique which anyone can apply on their blogs in order to display Animated Falling snow flakes with thunderstorm. Doesn’t that exciting? Indeed it is.
How The Falling Snowflakes Widget Looks Like?
We have used four different types of snow falls effects that include, Breeze, Medium Snow, Snowflakes and Thunderstorm. It would complement those blogs which have dark colors because originally Snow is slightly white in shade. Thus, it wouldn’t appear so prominent on a site that has a white background. Check out the Following screenshot because it will clear all the doubts which are popping up in everyone’s mind.
How To Add Falling Snowflakes in Blogger?
Just like our other tutorials, the steps listed below are extremely straightforward and would hardly take less than 5 minutes to complete. Follow the instructions as mentioned below.
- Go to Blogger.com >> Template >> Edit HTML >> Proceed.
- Now in the template Search for Skin and above it paste the Following CSS coding.
/* --- MyBloggerLab Falling Snowflakes For Blogger --- */
#mbl_snowflakes {
position: absolute;
height: 950px;
width: 966px;
overflow: hidden;
}
#snowContainer > div
{
position: absolute;
width: auto;
height: auto;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
#snowContainer > div > img {
position: absolute;
width: auto;
height: auto;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade
{
0% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes drop
{
0% { -webkit-transform: translate(0px, -50px); }
100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin
{
0% { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}
@-webkit-keyframes counterclockwiseSpinAndFlip
{
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}
- Once again in the template, search for <body> and just below it paste the following Html coding.
<script charset="utf-8" src="https://mybloggerlab.googlecode.com/files/snow.js" type="text/javascript"></script>
<div id="mbl_snowflakes">
<div id="snowContainer">
</div>
</div>
All Done: After pasting the above coding just press the Save Template button and Snowflakes are successfully implemented on your blog. Now visit your site and enjoy the picture perfect result.
From The Editor's Desk:
Hope you guys have enjoyed the chilling snowflakes. We are dam sure that your visitors would love this. To be honest, the snow fall is so real that it looks extremely remarkable. What are your opinions about it? Any modification that is necessary? Take a lot care of yourself till then, Peace, Blessings and in advance a Happy New Year.
How To Add Christmas Snow Fall Effect in Blogger Blogs
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!