Add falling snow to your website


How To Add Falling Snow On Your Website (2 SIMPLE STEPS)


It’s Christmas time: let’s make it snow!

It’s this time of the year again: Christmas and New Year. Maybe you’ve seen on some sites that the website owner/designer has added a nice snow effect on their web pages snow overlay gives a nice, cozy feeling to the visitor. And you may have thought: how did they do this?
Adding a snow effect to your website is not that difficult at all. You do not have a lot of HTML knowledge to implement it there is also no need to heavily edit any existing part of your website. By using a JavaScript file, we can easily add the falling snow overlay to our site. The use of images or Flash is not a necessity, which is for good reasons, such as performance or security.
The method explained here will work flawlessly on mobile devices as well. Or, if you wish to do so, you can disable the snow effect on mobile (e.g., smartphones such as Android and iPhone, or tablets such as Android tablets and iPad). More on this option later.

Step-1 

Go to Blogger dashboard

>Template

>Edit HTML

>CTRL+F to find </head>

copy and paste below code just above it.

<script src='https://ajax.googleapis.com/ajax/libs/jQuery/1.7.1/jquery.js'/>

<script type='text/javascript'>//<![CDATA[

(function($){$.fn.snow=function(options){var  $flake=$('<div id="flake"  />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),document Height=$(document).height(),document Width=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults, options);var  interval=set Interval(function(){var  startPositionLeft=Math. Random()*documentWidth-100,startOpacity=0.5+Math.random(),size Flake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=document Height*10+Math.random()*5000;$flake. Clone().append To('body').CSS({left: startPositionLeft, opacity:startOpacity,'font-size':sizeFlake,color: options.flakeColor}). animate ({top:endPositionTop,left: endPositionLeft, opacity:0.2}, duration Fall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);//]]></script><script>$(document).ready(  function(){

$.fn.snow({ minSize: 10, maxSize: 50, new On: 400, flake Color: '#ffffff' });

});</script>


You can remove above the red-colored line of code, if you have already installed jQuery plugin in your blog. If it doesn't work without that plugin, then keep it as it is.

Finally, Save Changes in your blogger template, and you're done. Now you should have some nice snowfall effect on your blogger blog.

So, guys it was a steps of adding a snowfall effect in your blogger blog, if you have any questions, feel free to ask by commenting below, i would love to answer your questions. <br />

Thanks :)

Post a Comment

Make Valuable Comment:

Previous Post Next Post