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

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

And to display falling leaves, use this code:

Falling Leaves: Falling Leaves

<script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js">
</script>
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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

96 comments

Write comments
January 03, 2009 7:40 PM delete

hello..my snowflakes is not active..why??can u tell me..

Reply
avatar
January 04, 2009 2:47 AM delete

well it's quite easy, and there's nothing to go wrong in it, you can try it on any other blog if you want to see the effect !

Reply
avatar
February 07, 2009 7:27 PM delete

it not work also at my blog.

Reply
avatar
February 08, 2009 1:49 AM delete

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 !

Reply
avatar
February 08, 2009 1:51 AM delete

If you are still getting any problem, then replace the red line in the code, with any other image's direct link !

Reply
avatar
February 13, 2009 9:49 AM delete

Its not working in any of my blog.
I tried this script even with changing the image url and on 4 different blogs. But not working :(

Reply
avatar
February 13, 2009 11:58 AM delete

Doesn't work for me either..

Reply
avatar
February 13, 2009 12:28 PM delete

Ya even I found some problem in the code :-/ , and it's not working even with other javascript codes, I'll try to change this code ASAP....

Reply
avatar
February 13, 2009 1:28 PM delete

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 !

Reply
avatar
March 04, 2009 11:09 PM delete

great post thanks mate.......god bless you

Reply
avatar
March 08, 2009 4:38 AM delete

how to make ballon flakes? or party 'staff flaskes?

Reply
avatar
December 23, 2009 9:24 AM delete

very funny, move right, they go left XD thanks! By The way, DO you know anything about Flash?

Reply
avatar
December 25, 2009 12:33 PM delete

i'll review this post with embed/add chrismas games for my blogger from indonesia

Reply
avatar
December 30, 2009 12:24 PM delete

@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 :)

Reply
avatar
February 09, 2010 3:20 AM delete

Thanks. I would like to download the jsfiles as indicated, but unable to, in order to change the image to falling feathers.

The blue snow is great!

Reply
avatar
February 09, 2010 9:13 AM delete

Yeah that blue snow is really cool.
To download that file, right click and save this link (save target as/save link as):
Download Link

Reply
avatar
March 07, 2010 9:05 PM delete

I do all of the steps above and they work.. thanks much... :X

Reply
avatar
March 09, 2010 5:11 AM delete

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 ;-)))

Reply
avatar
March 09, 2010 8:14 AM delete

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? :)

Reply
avatar
April 02, 2010 1:51 PM delete

what about the balloons? my blog has turned one year old, and i would like to celebrate. ha! thanks so much.

Reply
avatar
April 05, 2010 2:00 AM delete This comment has been removed by a blog administrator.
avatar
July 16, 2010 3:18 AM delete

I love flower very much.many kind of flower in the world.
thanks so much.

Reply
avatar
July 23, 2010 3:18 PM delete

thank you so much for such a lovely offering.

Reply
avatar
November 01, 2010 8:14 AM delete

ooo it worked for me thank you I now have snow !!

Reply
avatar
November 28, 2010 5:00 PM delete

Love it and it worked fine on my blogger site, under Safari. Now if I could only figure out how to make the flakes bigger!

Thanks so much!

http://papasuecreative.blogspot.com

Reply
avatar
Anonymous
December 04, 2010 11:12 AM delete

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!

Reply
avatar
December 04, 2010 6:22 PM delete

Thank you! This will be great for christmas!

I'm sharing this on my blog! Its great :)

Reply
avatar
December 04, 2010 11:40 PM delete

Glad you like it buddy :)
& thanks for spreading the word :)

Reply
avatar
December 05, 2010 11:04 AM delete

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

Reply
avatar
December 05, 2010 11:12 AM delete

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.

Reply
avatar
December 08, 2010 9:37 PM delete

Thanks a bunch!!! Now my site looks more cooler!!!


-Serafin10 www.Serafin10TCPC.Blogspot.com 8-}

Reply
avatar
December 15, 2010 7:46 PM delete

Thank you so much! :) It was really easy and I like that the flakes are big, everything else I had found had too small flakes! :)

xxx

Reply
avatar
December 18, 2010 11:05 PM delete

Thank you very much... I used it on my blog and it looks great :-)


http://www.allindiadownloadz.blogspot.com

Reply
avatar
December 23, 2010 1:59 PM delete

thax buddy, nice job, merry x'mas

http://sanhindapamula82.blogspot.com

Reply
avatar
December 25, 2010 1:10 AM delete

hey friend thanks i used in my blog plz take alook www.jobsbywork.blogspot.com

Reply
avatar
December 25, 2010 1:48 PM delete

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!

Reply
avatar
December 26, 2010 2:07 AM delete

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

Reply
avatar
December 26, 2010 2:10 AM delete

Once you edit it, then upload it to www.mdn.fm (you wil have to register here) and copy the DIRECT LINK of this .js file (now the link will end in .js) and then in the first code, instead of this link:
http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_snowflakes.js

Use the DIRECT LINK to your new .js file from mdn.fm

Reply
avatar
December 27, 2010 2:02 AM delete

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!

Reply
avatar
December 27, 2010 2:41 AM delete

@Arnavut
You're most Welcome :)

@Laloofah
Well, do try it and if you aren't able to...then just send me that image of the cupcake/balloon and I'll send you the code to use in your template :)

Reply
avatar
December 29, 2010 5:13 PM delete

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

Reply
avatar
December 31, 2010 8:18 AM delete

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!

Reply
avatar
December 31, 2010 11:15 PM delete

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.

Reply
avatar
January 01, 2011 10:38 AM delete

Thank you so much, Sai, I emailed them to you last night. :-)

Reply
avatar
January 01, 2011 12:25 PM delete

Hi Laloof, I haven't received any mail regarding this. Plz mail it again to this id: bloggerstop.net [at] gmail [dot] com

Reply
avatar
January 01, 2011 4:50 PM delete

Hi, Sai - I just re-sent it to your gmail addy. (I'd sent it to the admin/bloggerspot one before). Thanks for letting me know you hadn't gotten it!

Reply
avatar
January 06, 2011 7:47 PM delete

Hi Im waiting with ecxitement!!!! for the new cupcakes or anything else but snow! lol!.I dont even know how to stop the snow effect yet? lol!

Reply
avatar
March 28, 2011 8:53 PM delete

I need falling sunflowers...any ideas?
thx
patti

Reply
avatar
March 29, 2011 12:06 AM delete

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

Reply
avatar
May 12, 2011 12:52 AM delete

hi this is shankar i like sunflower

Reply
avatar
June 07, 2011 6:58 AM delete

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.

Reply
avatar
June 08, 2011 1:40 AM delete

Awesome Snow Flakes . Thanks :)

Reply
avatar
September 03, 2011 3:55 AM delete

actually i made a post with this and added a site linking for u is it ok?

Reply
avatar
November 05, 2011 10:02 AM delete

Love your falling snow! So many have asked about it, too! Thank you for sharing. Come by and visit us sometime and see your snow at work on a Siberian Husky blog! :-)

Reply
avatar
November 24, 2011 12:59 PM delete

Hunted all over for your twinkle effect. Didn't care forthe image snowflakes. Hugs to you!!!

Reply
avatar
Bob
November 28, 2011 3:57 AM delete

Hi, Thank you. It works great. Is it possible to add two things:

z-layer adjustment
Speed adjustment.

Reply
avatar
Anonymous
December 02, 2011 12:56 PM delete

Thanks it looks great on my site!

Reply
avatar
December 06, 2011 12:08 AM delete

I love the falling snow that appears automatically on my Wordpress blog, http://daisybrain.wordpress.com/ . But I shall definitely look into adding a widget in the Fall for falling leaves!

Reply
avatar
Anonymous
December 09, 2011 9:50 AM delete

love this. thanks for posting. my site looks festive.

Reply
avatar
December 15, 2011 11:04 PM delete

I had no problem adding this script to my blogger site, thanks much!

Reply
avatar
December 17, 2011 11:27 AM delete

YAY! it worked! love the snowstorm - thanks!

Reply
avatar
Anonymous
December 21, 2011 6:24 AM delete

Thanx man, snow is great!

Reply
avatar
December 23, 2011 10:37 AM delete

Thank you! it works fine on my blog! I love it! <3

Reply
avatar
December 24, 2011 3:49 PM delete

It's on my blog now too~ Thank you so very much~~ :X

Reply
avatar
December 25, 2011 2:23 AM delete

its really good, the best snowfall .
See this is my site ---

http://www.preciousgadgets.blogspot.com/

Reply
avatar
February 07, 2012 2:27 AM delete

well at last it worked for me thank you ... I am not a computer wiz but mangaed it after a while thank you for sharing ... I was expecting a storm but it is just a flurry at the moment ... lol ...

Reply
avatar
Tonya
March 31, 2012 12:35 PM delete

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

Reply
avatar
Nikki
April 03, 2012 12:43 PM delete

@Sai

I sent you an email with the picture that I want to be my effect. Can you please create it for me?

Reply
avatar
April 16, 2012 4:52 AM delete

can someone just post the script with flowers here so we can post some of them in our sites / blogs. Your kindness and generosity is much appreciated

Reply
avatar
June 06, 2012 4:31 AM delete

its working...thank u..visit my blog...tit4tab.blogspot.in

Reply
avatar
June 12, 2012 5:04 PM delete

how to make beautfull comment box , can we get his Exmple HTML code

Reply
avatar
September 27, 2013 4:52 AM delete

Hi,

Nice Birthday Balloons Blog.
Amazing Information you shared with us.
Thank You.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon