How to add mouse click cursor effect in Blogger

How to add a custom cursor in HTML? Add mouse click effect to cursor in Blogger. How to add mouse click cursor effect in Blogger - Peak Fiction. Tips

Hello everyone, welcome to Peak Fiction where we discuss topic of blogger. Today I would like to share with you a pretty interesting effect when we click the mouse.

How to add a custom cursor in HTML

Creating such a click effect makes our website more lively and beautiful. This mouse animation effect is created with the help of HTML, CSS, JavaScript and JQuery. You may have seen on other people's websites or blogs that when you click after visiting their website, a click effect is given.

Add mouse click effect to cursor in Blogger

Follow these steps:

Step 1: Go to the blogger admin page > themes > HTML editing.

Step 2: Copy the entire code below and paste it above the </head>.

<style type="text/css">
  /* Mouse Click Effect Css By Peakfiction. top */
  .mteffect {
    width: 60px;
    height: 60px;
    border-radius: 99em;
    border: 3px solid #6200ee;
    position: fixed;
    left: 50%;
    transform: scale(0.5);
    display: none;
    z-index: 999;
  }

  .mteffect.active {
    display: block;
    animation: mteffect 0.4s ease-out forwards;
  }

  @keyframes mteffect {
    from {
      transform: scale(0.2);
      opacity: 1;
    }
    to {
      transform: scale(1);
      opacity: 0;
    }
  }
</style>

Step 3: Copy the entire code below and paste it above the </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>
  //<![CDATA[
  $("body").append($('<span class="mteffect"></span>'));
  $(document).on("click", function (n) {
    var i = n.clientX,
      a = n.clientY;
    $(".mteffect").css({ top: a - 30, left: i - 30 }).addClass("active");
  });
  $(".mteffect").on("animationend webkitAnimationEnd oAnimationEnd oanimationend MSAnimationEnd", function () {
    $(".mteffect").removeClass("active");
  });
  //]]>
</script>

That's it then. Now you just need to save and see the results.

Above is all the code that helps us create effects when we click the mouse. You can also refer to some other codes via hastag #cursor on the web. If you have any questions, please comment below to let me know. Wish you success.