Sunday, 8 June 2014

How to add snow falling graphic design to blogger BlogSpot

After create a website or build a website, website builder have concentrate on website design specifically on website graphic design.
Add snow falling CSS design is a effective design and most of the visitor like this type of website design. Good website design is
Slightly part of the seo or search engine optimization.

How to add snow falling graphic design to blogger BlogSpot

1 Step: Go to Template and click on the Edit HTML

2 Step: click the small arrow on the left <b: skin>…</skin> to expand the style after expand put the code below above the ]]></b:skin> tag

/* Snow falling 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;}
}

#falling-snow {
background-image: url(http://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png), url(http://4.bp.blogspot.com/-8RALuvldFh8/UaJZY1tUptI/AAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png), url(http://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAADfE/0Lp5NLrudxc/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;
}
------------------------------------------------------------------------------------------------------------------------------------------
4th steps: Now search (CTRL+F) the <body> tag or if you can’t find it, search this line below
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
5th Steps: And just below that code, add this:
 <div id='falling-snow'>
6th Steps: Finally, find the </body> tag using (CTRL + F) key or manually and add </div> just above </body> tag.
Finally Save your Template then snow falling graphic design or website design is ready.

Conclusion

A good graphic design or website design is a one of the necessary quality of a website builder. Those blogger are not a professional designer they can use above steps and enjoy your snow falling graphic design o theirs BlogSpot.



No comments: