Saturday, April 22, 2017

How To Add Flower Falling Effect With Javascript

Flower falling effect is a really nice effect. With this effect, you can display the rain of flowers on any web page. And it really looks nice. If you have seen flower falling effect on any web page and then thought to add it to your Blogger blog. But don't know how to add this beautiful effect on your blog. Then don't worry I am here to teach you.
Recently I have shared a post on How To Add Falling Star Effect On Blogger Blog Maybe you will like to read it also. But this post is not about falling star effect so let's come to the main point which is the flower falling effect.              


Add cool flowers falling effects with javascript



Add Flower Falling Effect On Blogger Blog

  1.  Go to Blogger.com and log in to your account.
  2. Select your blog where you wanna add a flower falling effect.
  3. Now from your blog dashboard click on the layout tab.
  4. From the next page click on the add Gadget link.
  5. A new window will appear on your screen from this window select HTML/javascript.
  6. Now paste the following code into the text box and press the save button.
<script>
if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpJ0jWaEfVwVPicP4b-Wv7lCJoA05KTQvAdBv6XCPRTtsY2suVoPh8A0wcSNEW95bSIb-FtKC8f-1fmo9B_Nbhbt9rcVkIzW2QJ-ODrjKi31h2SSxePPUqCTKetYihsi96X4cY0JBPWg/s1600/f1-helponblogging.png";image_urls['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ4_2yoIUgNSHhSOvloTDHFkH7w0ej5nG2vroE531M8m87qx-SXTNvPWXkRhjQfeMU3qbdf8hOqao9cRyLLl_crB2DIBQ7iRprPTzaPAKBFRuPye0v935Mga1PjMzMkWDNmjy26clwJv0/s1600/f2-helponblogging.png";image_urls['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImqRjtaAq_eQcH7x_o1zlBg7-6tUyxIJNql3mO3-DrPt5Terr7BT8MgSpd6BDT_O8uEwPi9UJtf6chAbHsAhXBlEI7GLBc2j-A2wjWwSis7yd-rzKGYBqICtTTU2I308V9ZjyuKwZW10/s1600/f3-helponblogging.png";image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMKf8Enep9n2FuJza67FtKirxGgTgjG4XODLNVas7AtmC_4_fJnjsXRWnOT3KCQ4mHwlkGqRhd1xREKzPrxm1Tz7PCXSUzcQTjkWP9l8dQf04AVCJ-NoDcRJ8kYwVjIesFtPEW9oCoxW4/s1600/f4-helponblogging.png";$(document).ready(function(){var c=$(window).width();var
d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpJ0jWaEfVwVPicP4b-Wv7lCJoA05KTQvAdBv6XCPRTtsY2suVoPh8A0wcSNEW95bSIb-FtKC8f-1fmo9B_Nbhbt9rcVkIzW2QJ-ODrjKi31h2SSxePPUqCTKetYihsi96X4cY0JBPWg/s1600/f1-helponblogging.png','border':0});</script>

That's it the flower falling effect is added on your blog. Now visit your blog and see how it looks. If you have done everything correctly then you will see an amazing falling flower effect on your blog.

Thanks for reading my this post and keep visiting for more useful posts. If you have any question about this post feel free to ask me by dropping your comment below.



1 comment:

Template Designed By 92TRICKS © Copy Rights All Right Receved
Scroll to Top