Falling Snow Effect for Blogger? Heck, why not!?

In the last few hours, I’ve been playing around with this fine JavaScript library (jQuery) that I discovered yesterday at github. It is supposed to help webmasters mimic the falling snow and I think we all know that we have plenty of such scripts on the internet.

However, the one I’m playing with right now is pretty special because the falling snow it creates is quite real and it can do something extra that most other scripts failed to illustrate. That is the accumulation or the piling up of snow!

How does it look like?

Oh no! I don’t think I can describe it with mere words! I suggest you take a quick peek at the demo site and see it for yourself. :)

Yeah. It looks pretty cool, isn’t it?

If you have a blog that is powered by Blogger, the following question might pop out of nowhere. Can we ‘install’ such an effect on Blogger-powered blogs?

The answer, yes!

How to create the falling snow effect for Blogger-powered blogs

Creating such an effect for Blogger-powered blogs is indeed possible and the steps to create it are also pretty easy but I would not recommend bloggers to push such effects to every blog post that they have.

Oh no!

Just choose the most recent post that contains your auspicious greetings and apply the effect on that post alone. I see no reasons why bloggers should apply it to all posts. If you agree with me, then follow the following instructions.

Open up your Blogger template and look for the ]]></b:skin> tag. Once found, place the following JavaScript library (jQuery) right AFTER it. If you already have it on your blog, then please ignore this particular instruction.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

Now visit github, copy this file named snowfall.jquery.js, save it as a JavaScript file, host it somewhere reliable and place it’s link right AFTER the ]]></b:skin> tag . If you have no place to host it, then just use the following ready-made JavaScript file.

<b:if cond='data:blog.url == &quot;URL of your blog post&quot;'>
<script type="text/javascript" src="http://yourjavascript.com/3171122618/snowfall.jquery.js"></script>
</b:if>

Now we have come to the part I dislike most, explaining JavaScript snippets. There are several ways that you can use in the next step. So please decide how and where you want to see that effect on your blog post.

If you want to push the falling snow effect to the whole layout, then use the following JavaScript snippet. Place it right AFTER your HTML </body> tag (before the </html> tag).

<b:if cond='data:blog.url == &quot;URL of your blog post&quot;'>
<script type='text/javascript'>
$(document).ready(function(){
$(document).snowfall({flakeColor: '#FFFAFA', round : true, minSize: 3, maxSize:5, flakeCount : 100});
});
</script>
</b:if>

If you want to push the falling snow effect only to your blog header (like what I have done), take a close look at your Blogger template and identify the HTML <div> tag that contains or wraps around your blog header. Note down the value of its id or class attribute. Let’s say that it’s an id and the value is red-owl, then follow the following example and place it AFTER your HTML </body> tag (before the </html> tag).

<b:if cond='data:blog.url == &quot;URL of your blog post&quot;'>
<script type='text/javascript'>
$(document).ready(function(){
$('#red-owl').snowfall({flakeColor: '#FFFAFA', round : true, minSize: 3, maxSize:5, flakeCount : 100});
});
</script>
</b:if>

If yours is using class and value is red-compass, then replace the one marked in red (as shown earlier) with ‘.red-compass’.

Good! We’re almost done but there’s one more thing that I need to cover.

The Final Touch: The Snow Pileup!

Take note that this section is suitable only for those that have chosen to push the effect to the whole layout (the first example).

Now take another close look at your Blogger template and identity the HTML <div> tag that you want to use as the snow ‘collector’. Here’s a good suggestion, use the HTML <div> tag that contains or wraps around your horizontal navigation bar (hope you have one!).

Remember that id and class attribute thing I taught earlier? Apply the same understanding here and you should be okay.

Once you have identified the value for your id or class attribute, add the following new value to your JavaScript snippet. Replace the one marked in green with the value of your id or class attribute.

collection : 'value',

At the end of the day, your final JavaScript snippet will probably look something like the following (only for those applying the effect to the whole layout).

<b:if cond='data:blog.url == &quot;URL of your blog post&quot;'>
<script type='text/javascript'>
$(document).ready(function(){
$(document).snowfall({flakeColor: '#FFFAFA', round : true, minSize: 3, maxSize:5, flakeCount : 100, collection : '#description-holder'});
});
</script>
</b:if>

That’s it! Take a deep breath and save your Blogger template. Enjoy your new falling snow effect for Blogger-powered blog. :)