How to add heart effect on click in Blogger

Hello Blogger user, in this tutorial I will share with you all How to add heart effect on click for Blogger. Installing a heart effect on click on your website will look more professional, plus it can also serve as an assessment of the views.

Why do we have to add the heart effect?

Adding a 'page click love effect or section' to your website is an easy, effective way to give your readers an accessible face. Or your readers will also feel very happy to read your articles or it will make the look of your website very beautiful too. so let's know How to add a page click love effect.

How to make heart effect on click in blogger.

Adding only js. code

• Go to blogger 
• Go to Theme option
• Click on Edit HTML
• Now copy the code and paste the code above the </body>

  To find any Code/Tag click anywhere in code and click ctrl+F and find the 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>
  

  • Click on Save
  • Enjoy it

  Rate this article