falling_snow_flakes

Add Falling Snowflakes / Flowers / Leaves to Your Blog

Post Updated: Now this tutorial includes an additional snow-storm script. This hack will display falling snow in your blog even though it does not include any images in the script.
Whether it’s winter, spring or your birthday, adding some falling snowflakes/flowers/leaves or balloons to your blog makes it attractive. And to do that, you simply have to paste a code snippet in any of your blogs HTML/JavaScript widgets.
To show this widget only in the Homepage or any other specific page, read this post:
How to show widgets only in specific pages.

Steps To Follow:
Log in to Blogger, go to Layout, click on Add a Gadget and select it as HTML/JavaScript. And add any of the two code snippets:

Falling Snow flakes: Falling SnowFlakes

This code is old. Check the updated new code below.

And to display falling leaves, use this code:

Falling Leaves: Falling Leaves

This code is old. Check the new tutorial here.

NOTE: To change the images, first download the .js files, open it with text pad, and then in the code change the images with your own images.

UPDATE: Thanks to Schillmania, we now have an additional script to add falling snowflakes which looks very similar to actual snowfall.
Have a look at the live demo of this script. [Another Demo]
Code to add:

<script type=”text/javascript” src=”https://od.lk/s/116485933_TvUKI/snowstorm-min.js” />

You can further customize these snowflakes (color, number and twinkle effect) by adding these additional lines of code to it. So to add a customized widget, add this code instead of the previous one:

<script type=”text/javascript” src=”https://od.lk/s/116485933_TvUKI/snowstorm-min.js” />
<!– now, we’ll customize the snowStorm object –>
<script type=”text/javascript”>
snowStorm.snowColor = ‘#99ccff’; // blue-ish snow!?
snowStorm.flakesMaxActive = 96; // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

The SnowStorm script is provided under a BSD license.

95 thoughts on “Add Falling Snowflakes / Flowers / Leaves to Your Blog

  1. There is no problem in the code, the images were hosted at Gigaimage.com (code in red), and the servers at gigaimgae were down,
    now they are alright, you can try it now !

  2. Well I have changes the codes, so it works in Firefox and Opera but not in IE, so you may try it temporarily till I find something better !

    PS: Do read the Notes in the above post !

  3. @Anup
    I think the first 2 don't make the blog slow, but the third one makes it a little slow, anyways Merry Xmas and Happy new year !

    @Beben
    I'm glad you found the post worth republishing. Thanks for spreading the word 🙂

  4. Hello!
    Thanks a lot for the great script!
    I would like to let fall flowers on my blog and I read to download the .js-file and to change the image.
    But now my question (yes, I know, I don't know a lot….): If I change the image, where do I have to save it and where do I have to save the new .js-file (the changed one)?

    Thanks alot for your help

    Annette ;-)))

  5. Hi Annette,

    I just checked your blog and found the falling flowers in your blog. The coding is all correct & so I hope you now know how and what to edit, to make any changes in the future? 🙂

  6. THANK-YOU! I've been looking forever for a legit snow effect code that doesn't lag, scroll my site left and right, and looks nice!

    You've helped me find the perfect code here! Thanks once again!

  7. I can't get the snow to fall over the entire blog. It will only fall in the sidebar. I even tried to put it in the gadget under the header but it won't work there. Please tell me what I need to do to make the snow fall all over my blog
    thank you
    Jan

  8. That's quite strange Jan. Anyway, instead of pasting the code in an HTML/JavaScript widget, paste it directly in to your template.
    Go to Design-> Edit HTML
    and find this code:

    </body>

    And paste the code immediately ABOVE it.

  9. Thank you for the easy-to-follow tutorial and snowfall script! I'm enjoying watching the pretty Christmas flurries on my blog, since we're not getting any in real life. 🙂

    I'd like to have falling balloons or cupcakes on an upcoming birthday post, but this time I'm not clear on how to do it. I've found a couple of images I'd like to use and have them saved on my desktop and in PhotoBucket, but don't have the first clue where I go or what I do to "download the .js files"? (I guess my question is similar to Annette's, but since she obviously figured it out on her own you didn't need to answer her question here. So please do tell, how did she do it?) 🙂

    If you can just provide a script for falling balloons like you did for snow and leaves, that would be great too. Thank you, and Merry Christmas!

  10. Hey there,
    Merry Christmas and a Happy New Year 🙂

    Here's the file you have to download:
    http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_snowflakes.js
    (Open it in your browser and save it as a .js file -> to edit it, open it with a notepad/textpad just as you open a text file).

    Then in the second line of the code, you have to change this url:
    http://4.bp.blogspot.com/_4fVBL4fjrFI/SZW47MeQrsI/AAAAAAAACOY/gI-apzr2W0c/s1600/SnowFlake.gif

    with the DIRECT LINK of the balloon/cup cake image.
    DIRECT LINK usually ends with file extension, like .jpg/.gif or .png

  11. Sai – I'm not sure if I'll be able to figure all that out and get it to work in time (if ever, lol), but I really appreciate your taking the time to explain it all to me! I'll do my best to follow your instructions and maybe I'll surprise myself and end up with falling cupcakes! 🙂 Happy New Year!

  12. Hi Please can you help? i would love to change my snow effect on my blog now, would be cool to have flowers or cupcakes have you a code for them? pretty please?????

  13. Thank you, Sai! I've been trying, but keep getting stuck. (A lot of it's just me and my low-tech tendancies, and some of it is that I'm on a new iMac that replaced my 9-year old Flower Power imac recently, and I'm still learning all its bells and whistles!)

    I'm happy to provide you with the balloon and cupcake images and ever-so-grateful if you'd provide the code to make them fall! 🙂 I have them saved on my desktop, but am unsure how to get them from there to here (or from me to you without emailing them). If there's not a way to do that, I could provide the URLs for them from my PhotoBucket account, unless you have another suggestion. Let me know!

    It looks like jules can use the falling cupcake code too. I do want to learn how to do this, but now's just not the time and I'd like this for a blog page I'm posting posting first thing Monday morning (if you can do this by then!)

    Thanks again! And Happy New Year!

  14. Well Laloofa, you can send the images either to my mail (see my contact page) or just comment here again with those photobucket links.
    I will update the post, with the new code, which can be used by you ans Jules.

  15. Open this link:

    http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js

    and save it on to your desktop, as a .js (javascript) file. Open it with notepad/textpad and REPLACE this link:

    http://1.bp.blogspot.com/_4fVBL4fjrFI/SZW5bHEV-lI/AAAAAAAACOg/LVmh3Ik1EAc/s1600/FallingLeaves.gif

    with the DIRECT image address of a sunflower (use a small image of sunflower). SAVE the file.

    Then upload the file to http://www.mdn.fm (you'll have to register there) and finally instead of the link in the tutorial above, use the one (DIRECT LINK) you'll get from http://www.mdn.fm

    So, the code will look like this:

    <script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js"&gt;
    </script>

    PS: If it's not clear to you, then just send me the sunflower image via the contact page of this blog. I'll send you the new code.

  16. Hi, these are very beautiful script. But will u please create another two-three javascript files of raindrops & dew and baloon??

    Please I'm eager to see it here.

  17. Can someone please tell me how I can make the snowflakes to only appear outside of website container? I do not want the snowflakes to cover up my website page. I only want them to appear on the left and right hand side of my website page.
    I will check this thread to see if anyone can help me.

    Thanks so much,
    Tonya

Leave a Reply

Your email address will not be published. Required fields are marked *