Brand New Snow Fall Effect For Blogger This Christmas




| 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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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. I tried it, but it doesn't show the snowflakes :( What did I do wrong?

    ReplyDelete
    Replies
    1. 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
    2. Not that I know... I tried it both with and without the green line...

      Delete
    3. 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
  3. Oh what fun! Thanks for sharing this. I just added it to my blog and it looks great!
    -The Chilly Dog

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Best snow effect I've ever seen. Thanks for share and I will put them on my blog

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. 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
  8. Cool, this feature is by default in wordpress blogs I guess. However I'll try it for my ne wblog.

    Cheers!

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

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

    ReplyDelete
    Replies
    1. 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
    2. I added the code but its not showing snow effect i badly wanted it can you please help. http://bloggermans.blogspot.in

      Delete
  11. 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
  12. I can't get it to work. I've been trying for an hour and can't do it. Please help.

    ReplyDelete
    Replies
    1. 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



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us