How To Add Christmas Snow Fall Effect in Blogger Blogs
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.http://www.mybloggerlab.com/2012/11/how-to-add-christmas-snow-fall-effect-in-blogger.html
