Hello Friends! How are you all? I hope you are all doing good and great. Previously we have shared many tips and tricks about Blogger. Today we are going to share with you How to add Colorful Heart Effect on your Blogger site.
This is same like the Click Ripple Effect. When you click anywhere the colorful hearts will appear and it looks beautiful.
I have added this effect for this post only. Click anywhere on the Article and you will see the effect taking place.
So let's start the process of it’s installation.
Before starting always backup your template for any kind of error and easy restoration.
How to Add Colorful Heart Effect on blogger?
So there is only one step you have to add so follow the below given tutorial.
Step 1: Login to your Blogger dashboard.
Step 2: Click on theme section.
Step 3: After that edit HTML.
Step 4: Then search for the </body> tag.
Step 5: Now copy the below given JavaScript and paste it before the </body> tag.
<script type="text/javascript">
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
//]]>
</script>
Now click on save theme.
So after following the above steps I hope you have successfully Added Colorful Heart Effect on your Blogger blog. If you face any kind of error kindly contact us.
Conclusion
In this post I have made a tutorial about How to Add Colorful Heart Effect on Blogger? I hope you have liked it and please share with your friends and follow our blog for more.If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.