Hello Friends, Today we will discuss about an interesting tutorial to redesign your blogger website. How To Add Snow Falling Effect in Blogger Website ? So that visitors feel at home lingering on your blog, it would be nice for you to think about how to make that happen. Whether it's designing the blog as attractive as possible, or adding other effects so that visitors don't get bored.
Well, here I have a cool tutorial that can be applied to your respective blogs. Namely the Snow Falling Effect in Blog, curious about how it looks ?
Benefits :-
- You can Redesign Your Blogger Website.
- Attract Your Visitors to come again in your Website.
- Your Blogger Website looks amazing after adding it.
However, in this post I will share How To Add Snow Falling Effect in Blogger Website, looks beautiful, does not block the view of the viewers and is not too burdensome for the loading process of your blogger website.
To Add Snow Fall Effect on main Blog , You just need to follow few easy steps below.
How To Add Snow Falling Effect in Blogger :-
- Go to Blogger.com and Login with Your Account.
- Now Open the Template/Theme Menu.
- Then Click the down arrow icon next to the Customize/Customize button.
- Next select Edit HTML.
- Then Copy the code Provided Below and Paste it above the </head> tag.
<style type='text/css'>
/* Snow Falling Effect */
.techyball{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.snowstech{height:100%;position:relative;overflow:hidden;z-index:1}
</style> - In Next Step Copy the Code Provided Below and Paste it Above the </body> tag.
<div class='snowstech'>
<canvas class='techyball' id='techyball'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("techyball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script> - If You have added All code then Don't Forget to click on Save Button. Finished your Work ans open your website to see the results.
Conclusion :-
Well That's a short tutorial on How To Add Snow Falling Effect in Blogger Website , hopefully this article can be useful and further beautify the appearance of your blog, thank you for reading our posts. if you want any tutorial then write comments to me.
Post a Comment
Post a Comment