How to Add colored heart effect to your blog

Add colored heart effect to your blog site.

🙏 Hello, dear readers, how are you? 

🥰 I hope you are well. Previously, I shared the click ripple effect on Blogger. 

📡 Today, I will add colored heart effect to  your Blogger blog site. Add colored heart effect to your blog. 

This is the same as the click ripple effect. When you click somewhere, colored hearts appear, which is beautiful.

 I added this effect just for this post. Click anywhere on the post and you will see the effect happen. 

🌎 Now, let's start the installation process.

Step 1- Make sure to back up your template before you start to avoid errors and make it easier to recover. 

Adding Colored Hearts Effect So, just follow the tutorial below as it's just one extra step. 

🌏 Step 2- Log in to your Blogger site  dashboard. 

Click on the subject area. Then open your edit your HTML editor. Next, find the </body > tag, end of the current HTML editor.

Next, copy the below  JavaScript codes, and paste it before the tag.

Copy your javascript code

<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>

And Click "Save Design". We hope that after following the  steps above, you have successfully added colorful heart effect to your Blogger blog site.

If you facing any problem, please contact us.

So friends, Today's article will teach you how to add colorful heart effect to your Blogger blog site. 

We hope you liked this article. Please comment it below. 

If you have any questions, please leave a comment below this article. Good luck.

🌎 About the author,

Hello, friends. Welcome to our website. I hope you are all well. If you like our work, please come back and like and follow our blog website.

Thank you please visit again.