December 23, 2009

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="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.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="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.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.

96 comments:

Sharifuddin Ibn Suhaimi said...

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

Divya Sai said...

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 !

Anonymous said...

:))

विनय said...

great dude...

Divya Sai said...

Thanks Vinay !

abangwan said...

it not work also at my blog.

Divya Sai said...

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 !

Divya Sai said...

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

Download Manager said...

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 :(

The Queen said...

Doesn't work for me either..

bloggerstop.net said...

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

Divya Sai said...

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 !

Shilpa shetty said...

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

Divya Sai said...

welcome shilpa !

CrakerLo said...

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

Chrismas Snow Flakes said...

Nice tutorial...thanks for this !

AKU said...

:X nice....

CrakerLo_Rakero said...

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

Anup @ Hack Tutors said...

It makes bloglittle slow:(

BEBEN (Prodigy of Head) said...

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

Divya Sai said...

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

Fizik said...

thank you very much :X

Divya Sai said...

You are most welcome :)

Owly Byrd said...

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!

Sai @ Blogger Help said...

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

bebe.be.bee said...

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

Annette said...

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

Sai - Blogger Help said...

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

Elizabeth said...

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

5star said...
This comment has been removed by a blog administrator.
rohit said...

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

Arian T said...

thank you so much for such a lovely offering.

Sarah said...

Thank you so much!

sandy's crafty bits said...

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

PapaSue said...

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

Anonymous said...

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!

Mylifeasacomic said...

Thank you! This will be great for christmas!

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

Sai - BloggerStop.Net said...

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

PrimitiveJan said...

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

Sai - Blogger Widgets said...

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.

Β.Σ. said...

Very good !!! Thanks...

Serafin10 said...

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


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

Dottie (Tink's Place) said...

Works great on my blog!

D :)

Stavroula @drugstoreandbargainlover said...

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

CIVILPRINCESS said...

its so nice! thanks :)

Nagaraju G said...

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


http://www.allindiadownloadz.blogspot.com

ismk1982 said...

thax buddy, nice job, merry x'mas

http://sanhindapamula82.blogspot.com

Shahnawz Sadique said...

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

Laloofah said...

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!

Sai - Bloger Widgets said...

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

Sai - Blogger Help said...

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

ARNAVUTcigeri said...

Thank you...

Laloofah said...

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!

Sai - Blogger Widgets said...

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

jules said...

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

Laloofah said...

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!

Sai - BloggerStop.Net said...

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.

Laloofah said...

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

Sai - BloggerStop.Net said...

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

Laloofah said...

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!

jules said...

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!

Raspberry Lane Primitives said...

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

Sai - Blogger Help said...

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.

shankar said...

hi this is shankar i like sunflower

Tehreem said...

Thanks

i'll try it.

anupamrocks said...

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.

nadia syakila said...

Awesome Snow Flakes . Thanks :)

leojin bose said...

wow thanks

Bharadwaj said...

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

ict power said...

thanks

Nur Faizah Allasa said...

cool ... !!

FiveSibesMom said...

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

Shirley said...

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

Bob said...

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

z-layer adjustment
Speed adjustment.

Anonymous said...

Thanks it looks great on my site!

daisybrain said...

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!

Anonymous said...

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

JenJacqs said...

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

melissa@joyineveryseason said...

YAY! it worked! love the snowstorm - thanks!

Anonymous said...

awesome

Anonymous said...

Thanx man, snow is great!

Lydia Plain said...

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

許・美美 said...

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

Rahul Suresh said...

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

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

Annette said...

Thankyou!

♥Cek Kpop♥ said...

it's work! thanx u so much!

CONNI said...

Thanks!!!

sandy's crafty bits said...

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

Tonya said...

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

Nikki said...

@Sai

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

Twilight Faery said...

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

Ma. Kae Trixia Salonga said...

Thank you so much!

Tit4tab said...

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

Hassal Sharif said...

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

Yateendra Sahu said...

=))

Shrey Patel said...

Hi,

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy