If your Blog has a dark interface then this widget serves better.The Snow flakes and the breeze are in white color so dark background will be better to get a good look.
If you want to get dark Christmas background ,set the following picture or search darker Christmas backgrounds.
- Sign in to your Blogger Account
- Go to Template > Edit HTML
- Find ]]></b:skin> (Find using ctrl + F)
- Copy the following CSS code above it
/*-- Breeze for Snow flakes --*/
#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); }
}
#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); }
}
- Search <body and copy the following below it
<script charset="utf-8"
src="https://netoopscodes.googlecode.com/svn/branches/Js
files/snowfall.js" type="text/javascript"></script>
<div id="mbl_snowflakes">
<div id="snowContainer">
</div>
</div>
<div id="mbl_snowflakes">
<div id="snowContainer">
</div>
</div>
- You are done... Save the Template
Post a Comment