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 HTML2 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSNEhe6cftsR3h9KOEePJMxI8xhVXDyGxgp6fF7MGo6rAWFWbg_jGjyc4h23CgssNXq5h3LpJIcKoreb8LDLWrEbITN6vm9VXX_HEadC3DWqL-nG_NSADc6MIrm8p9Pd2865TQbuJZlyxf/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI_8udEzoiSRtbGKj59_zB4rfefeiqwmvaNCqeJ0_g9VAQsi9aFG309XObuawlelJ0BbyFkr5L1ICiV49bTr2le3B_gLb3S4eAPzQwJ41w8Iwucop8iMAI6p8WqW-EIEfqJD7oR_ua93E8/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj724iGec3rnUjL1UHd5yo641IiRX0fr27bSXMeoIBFpxSjOzQLWp35V5M3YUqVmtHLNPEw8l3klXlq28as4_ebXDQR-PTKpFXlv0RqEntE42OaKcpA_Em9JJFCVrgjKKjbJ_JBLPAhPueF/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='"loading" + 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.
No comments:
Post a Comment