How To Add Snow In The Background of Your Blog Using CSS alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... How To Add Snow In The Background of Your Blog Using CSS 6 comments Today we’re going to go over a super simple CSS technique that you can use to make it snow on your Blogger blog. It seems particularly attractive since it doesn't require scripts, only CSS and three small images. An advantage of this method is that by not using scripts doesn't overload the blog, the disadvantage is that users with not so modern browsers, will not be able to see it (in Internet Explorer works for version 10 and up). The snow will fall in the background of the blog, which, in addition, prevent interfering with links or content (because the flakes are images), also prevent blocking the visibility of the content of the blog. You can see the demo in this test blog. How To Add Falling Snow To Blogger Blogspot Step 1.Go toTemplateand click on theEdit HTMLbutton: Step 2.Click the small arrow on the left of...to expand the style (screenshot 1) and click anywhere inside the code area to search by using the CTRL + F keys for the]]>tag (screenshot 2) Step 3.Add the following code just above it: /* 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; } Screenshot 1: Screenshot 2: Step 3.Now, search (CTRL + F) thetag or if you can't find it, search this line below: Step 4.And just below, add this:

Step 5.Finally, find thetag (CTRL + F) and add the following just above it:

Step 6.Save the changes and that's it. Enjoy!!! :) As you can see this tricks is very simple and easy to install, does not block the visibility of blog's content and most important, it has no scripts, only CSS and nothing else. Like 1 Random Posts Fading Box With Newer/Older Posts Links and Titles for Blogger25/05/2013 - 3 Comments How To Add A Tabbed Navigation Widget to Blogger29/04/2013 - 14 Comments Add Author's Profile Picture and Name in Multi Author Blog22/02/2014 - 2 Comments Related Posts: Add a Custom jQuery Lightbox To Blo... How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... 6 comments: YourSpecialDog 12/17/2013 Thank you so much , i wanted to do this for such a long time Reply beast_boy 12/17/2013 hi very nice blog , with option to see posts in grid and list view tried searching internet but none of the code could do it , hoping that you will definitely help me out in this Reply tolga gönül 12/21/2013 this code was not on our site header is staying at the snow we need to do for it http://postimg.org /image/l7r6mcxg7/ Reply Admin 12/22/2013 Not Working Check Out What's The Problem.... www.genioxe.blogspot.c om Reply TRICKSON 12/25/2013 works perfectly ...................... Reply Kwadwo Boadu 1/19/2014 mine isn't working Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,777 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Usman Kurniawan not work in my template :( ahmad why i cant use that ? or because my blog its nofollow ?? Anonymous hi admin g i want ask some query about blogging please tell or... JazzyJ Thanks so much! But how do you change the font type of the... Saumya SC Done.........Awesome.........Thanks a lot :) Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like