Adding effects like snow falling, stars falling and hearts falling have been posted earlier on this blog, but this is another version of falling leaves in blogger for giving it much more natural look, combined by nature. Well this effect is simply created using images and jQuery and it works everytime someone visits your blog and he see leaves falling from top. So jump in too below tutorial and have fun.
- Go to Blogger > Layout > Add Gadget.
- Now you just need to choose HTML/JavaScript Gadget and add the below JavaScript code to it.
<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/AVvXsEjSoL_sKBmUJOCxcvf55t5THi7wHWMspu4825sJGH74FQY24nNCWq_YLiOlYJ7SPgHqFU1vz43AmkPGar9-0jRiIFQCckF15-bbhXXmuLC7IBr1cyPhp6coM_fUHuUJpI8kFi91u5OC8Q8d/s1600/Leaf1.png";
image_urls['rain2']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJs8yMtmSVgmzydiQribk8e8IRWRw8qXIf_f2NnRJgarmoTksANKwCGCGplJpDkvDhm1aR10s0sxlVmcgZpP0hmHhhU9bT6vYZ825v7KZo6HU7uANKueG8V-G0wdDQxfUDwv4RnLAgAbHq/s1600/Leaf2.png";
image_urls['rain3']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ad8hZUWucf1tYulb8N7wTHJKP1A5BT07eeFN8xZKmp5VJBIUoSxkvDamFAxR8EGVBgiVYe25BYYjWVMb7mx0JB5Mw60gzGGSOCqc1rGiqYyh7FPjAjZAS1b0nh0ne4t3O-MWJw_8WCjD/s1600/Leaf6.png";
image_urls['rain4']="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XCvn1OJtOGbw-VrlCeMv_0o36sYzD1MWlg3Q16dH9srgG4J77a-EZWCXgfehrvEHmccreBNfukfY1c6kw_HgDf9_kkcB7Sc731uvt2BgLhgElmiKOhEtG_EmBDLFcONlbkp5-U3hnIBA/s1600/Leaf5.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> - Now code contains some image urls that contain leaf images which you can change according to your preference.
- So that’s it now Save the Template and refresh your blog to see the new effect. Well you can also replace the leaf images with other objects and create new effects, explore yoru creativity have fun :)