Buy Plus UI v2.5! Demo Buy Now!

How to Add Christmas Snow Falling Effect on Your Bloggger Blog

Hello Blogger's, how are you I hope your are doing good. You know after two days Christmas is here and let's decorate your blog with the snow effect.

So today we are going to see How to Add Christmas Snow Falling Effect on Blogger Blog.

How to Add Christmas Snow Falling Effect on Your Bloggger Blog

I am Sadab Ali and welcome to Tech Aadi. So let's start the process of adding Snow to your Blog.

Before following the Process please beackup your template for any kind of errror and easy restoration.

Adding Snow Falling Effect

There is only one step you have to add one code in your template or particular page. So follow the below given steps carefully.

Adding Code

Step 1:- Go to your Blogger dashboard.

Step 2:- Now go to Theme section and click ok Edit HTML.

Step 3:- Now paste the below code just above the </body> tag.

<style>
	#snowflakeContainer{position:absolute;left:0px;top:0px;}
	.snowflake{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
	.snowflake:hover {cursor:default}
</style>
<div id='snowflakeContainer'>
<p class='snowflake'></p>
</div>
<script style='text/javascript'>
	//<![CDATA[
	var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];var transformProperty=getSupportedPropertyName(transforms);var snowflakes=[];var browserWidth;var browserHeight;var numberOfSnowflakes=50;var resetPosition=false;function setup(){window.addEventListener("DOMContentLoaded",generateSnowflakes,false);window.addEventListener("resize",setResetFlag,false)}setup();function getSupportedPropertyName(b){for(var a=0;a<b.length;a++){if(typeof document.body.style[b[a]]!="undefined"){return b[a]}}return null}function Snowflake(b,a,d,e,c){this.element=b;this.radius=a;this.speed=d;this.xPos=e;this.yPos=c;this.counter=0;this.sign=Math.random()<0.5?1:-1;this.element.style.opacity=0.5+Math.random();this.element.style.fontSize=4+Math.random()*30+"px"}Snowflake.prototype.update=function(){this.counter+=this.speed/5000;this.xPos+=this.sign*this.speed*Math.cos(this.counter)/40;this.yPos+=Math.sin(this.counter)/40+this.speed/30;setTranslate3DTransform(this.element,Math.round(this.xPos),Math.round(this.yPos));if(this.yPos>browserHeight){this.yPos=-50}};function setTranslate3DTransform(a,c,b){var d="translate3d("+c+"px, "+b+"px, 0)";a.style[transformProperty]=d}function generateSnowflakes(){var b=document.querySelector(".snowflake");var h=b.parentNode;browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOfSnowflakes;d++){var j=b.cloneNode(true);h.appendChild(j);var e=getPosition(50,browserWidth);var a=getPosition(50,browserHeight);var c=5+Math.random()*40;var g=4+Math.random()*10;var f=new Snowflake(j,g,c,e,a);snowflakes.push(f)}h.removeChild(b);moveSnowflakes()}function moveSnowflakes(){for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.update()}if(resetPosition){browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.xPos=getPosition(50,browserWidth);a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(moveSnowflakes)}function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}function setResetFlag(a){resetPosition=true};
	//]]>
</script>

  • Falling Snow Customization
  • Change icon : <p class='snowflake'>❄️</p>

❊ ✽ ✫ ✬ ✭ ❃ ❋ ❀ ✤ ✥ ❄ ✾ ⋆ ✢ ✰ ☘ ❋ ✦ ✧ ✣ ✷ ✸ ✺ ✱ ✶ ✻ ❈ ❉ ✪ ✿ ❁ ✩ ★ ✢ ✣ ☘ ✤ ✥ ✱ ✲ ✵ ✶ ✷ ❊ ❋ ✸ ✹ ✺ ✻ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❈ ❉
  • Change the snow color eg color:#ebebeb
  • Change Number eg numberofsnowflakes=50
  • Resize: 30+"px"

Now don't forget to save the theme.

After following the above steps I hope you have successfully installed the script for your blog. If you got any questions or having problem implementing this script kindly contact us.

Conclusion

So today we have see the tutorial of How to Add Christmas Snow Falling Effect on your Blogger Blog. I hope you like this article. If you have any query kindly do comment below and follow this blog for more related post.

Reference:
code.pro.vn

Read also :

Rate this article

Getting Info...

About Post Author

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Plus UI, you agreed to use cookies in agreement with the Plus UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.