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.
About the Editorial TeamThe Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
5 comments
How can i add Advertisement Banner Space On my blog?
THIS IS WORKING BUT CODING APPEARS ON BLOG
jatinkharb.blogspot.in/
plz hlp me
working fancytricks.com
Working check www.Fancytricks.com
Great work...it works fine
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.