How to add bouncing heart effect when clicking somewhere in Blogger with JavaScript

How To Add Heart Click Effect in Blogger ?

 Hello, everyone! Wellcome to SoiPro .Today on this occasion I will going to share a tutorial about How to add bouncing heart effect when clicking somewhere in Blogger? with JavaScript

How To Add Heart Click Effect in Blogger :-

OK, let's go straight to the installation tutorial.You now follow these steps carefully.

Step 1: First of all Login to your Blogger Dashboard..

Step 2: On Blogger Dashboard., click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now find the code </body> Then Copy The Given JavaScript Code and Put it Above it.

 <!-- Heart Click Effect Animation By wWw.SoiPro.Com -->
<script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js' >
   </script> 
<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>

Step 6: Lastly, Save the changes by clicking on this icon 

Conclusion :-

This effect is created with HTML, CSS, and JavaScript, but has been merged together and converted to JavaScript. You may have visited other people's websites or blogs and when you clicked on it, effects like love effect, mandala effect etc.

Reference:
www.soipro.com