Brand New Snow Fall Effect For Blogger This Christmas

Posted : Thursday, December 12, 2013 | Post Author : Paul Crowe | 21 comments

Snow Three

Looking back through the archive I think we have released a different snow fall effect every Christmas so why break from tradition.However I didn’t want to write a new effect just for the sake of it I wanted it to be better than all the others and it is.The original effects were in many cases just white dots that would float down the page this time we have actual snow flakes and they look great.So it’s the classic snow flake shape in different sizes with an infinite fall that still wont block the content for readers.

The effect is created using jQuery and by using jQuery we can offer some settings to suit your blog.The settings we added are to change the sizes of the flakes, colors of the flakes and how many flakes you want falling (The frequency of flakes falling).

But don’t worry it’s very easy to add the code to your blog and I will walk you through it so even a newbie can do it.Take a look at the demo below then the tutorial.

Also make sure to check out our other Blogger effects you can use for Christmas.

View Demo Button

Add The New Snow Flake Effect To Your Blog

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='http://yourjavascript.com/61532113121/new-snofall.js'/>

<script>
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
</script>

The code in green is the main jQuery script if you previously added jQuery to your blog do not add that line.

Settings

The settings are highlighted in yellow above and are as follows :

minSize: 10, – Sets the minimum size of snow flakes, by changing the minimum and maximum sizes you can create different contrasts to suit your blog.

maxSize: 50, – Sets the maximum size of snow flakes.

newOn: 400, – Sets the frequency of snow fall, increase the number to have flakes fall more often and decrese the number for the opposite effect.

flakeColor: ‘#ffffff’ – This sets the color of the flakes.You can change it to text like this : flakeColor: ‘red’ to make the flakes red, you can also use Hex Colors.This is usefull if your blog has a white background, you could perhaps change the color to grey or off white.Something like #ddd or #ccc would be a good option.

That’s it with all your settings in save your template and check out your new snow effect.Drop your comments and questions below.

AuthorAuthor – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

21 comments:

  1. Hello,

    Wow amazing tutorial, it’s really cool effect for blogger blogs. I’m gonna use the effect on my blogger blog.

    Thanks for share

    ReplyDelete

  2. Alexandra [ILUMUOTI]December 13, 2013 at 12:20 PM

    I tried it, but it doesn’t show the snowflakes 🙁 What did I do wrong?

    ReplyDelete

     

  3. Had you the jQuery script in your template already ? Remove the line of code I have in green in th post and see if it works.

    Delete

  4. Alexandra [ILUMUOTI]December 14, 2013 at 11:10 PM

    Not that I know… I tried it both with and without the green line…

    Delete

  5. Alaxandra I quickly checked your blogs source code and you do already have jQuery script in the template.

    You said you tried it without the green line so perhaps it is an issue with the jQuery that is already in your blog.

    This is the script that is already in your blog is this :

    <script src=’http://code.jquery.com/jquery-latest.js’></script>

    Try removing that then see if it works.

    Delete

  6. Oh what fun! Thanks for sharing this. I just added it to my blog and it looks great!
    -The Chilly Dog

    ReplyDelete

  7. This comment has been removed by the author.

    ReplyDelete

  8. Best snow effect I’ve ever seen. Thanks for share and I will put them on my blog

    ReplyDelete

  9. This comment has been removed by the author.

    ReplyDelete

  10. I’ve been trying for the last hour and a half to get snow to fall on my blog..and now it does, thanks to you! Its wet and windy and miserable outside but now I’m feeling decidedly festive 🙂
    Thank you so much for such easy to follow instructions, I’ll definately be back here on a regular basis!

    ReplyDelete

  11. Cool, this feature is by default in wordpress blogs I guess. However I’ll try it for my ne wblog.

    Cheers!

    ReplyDelete

  12. Amazing! At first i didn’t add the Green Line and it did not work but then i added it and it worked!

    ReplyDelete

  13. Thanks Sir , It is amazing !

    ReplyDelete

  14. Thanks for this amazing snow flakes effect. Is it possible to add this effect only on homepage and not on blog posts?

    ReplyDelete

     

    Replies

     

  15. Yeah if you add the codes between these conditional tags :

    <b:if cond=’data:blog.url == data:blog.homepageUrl’>

    – PUT THE CODE FROM THE POST HERE –

    </b:if>

    Delete

  16. I added the code but its not showing snow effect i badly wanted it can you please help. http://bloggermans.blogspot.in

    Delete

  17.  

  18. Thanks for sharing this script but where i paste it .? Because i use this script but it is not showing like snow fall …so please tell me the solution …

    ReplyDelete

  19. I can’t get it to work. I’ve been trying for an hour and can’t do it. Please help.

    ReplyDelete

  20. Bigma you may have a jQuery confilct.Look at the code above I have a line in green remove this line and see if it works.

    Delete

  21.  

  22. TayeaLovesYou WZWMarch 15, 2014 at 5:20 PM

    Doesn’t work …

    ReplyDelete

  23. TayeaLovesYou WZWMarch 15, 2014 at 5:21 PM

    NEVERMIND!! It worked! FINALLY! XD

    ReplyDelete