Hello viewers how are you I hope you are doing good and great. Previously we have shared Click Ripple Effect on Blogger. Today we are going to Add Colorful Heart Effect on your Blogger Blog.
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 installation.
Before starting always backup your template for any kind of error and easy restoration.
Adding Colorful Heart Effect
So there is only one step you have to add so follow the below given tutorial.
Steps
- Login to your Blogger dashboard.
- Click on theme section.
- After that edit HTML.
- Then search for the
</body>tag. - 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>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
So today article is all about how to Add Colorful Heart Effect on Blogger Blog. I hope you like this article and please rate it below. If have any questions kindly comment below this article. Wish you good luck 🤞.