How To Add Mouse Click Effect in Blogger ?

Hello Friends, Welcome again to all of you in today's new post. In this post I will share with you all a tutorial on how to add mouse effect on blogger. By adding this effect, as soon as your website visitors come to your website, as soon as they click on your website, this mouse effect will be visible on your website.

This mouse effect effect is created with the help of HTML, CSS, JavaScript and JQuery. You may have seen on other people's website or blog, when you click after visiting their website, the effect of mouse click will be given.

I will share a very easy tutorial on this in this post, you will be able to use it very easily on your blog by reading this post. So follow the given steps till the end.

View Demo

How To Add Mouse Click Effect in Blogger :-

Step 1 :- First Go To Blogger.Com.

Step 2 :- Then Login Your Blogger Account.

Step 3 :- Then Click on Theme Menu.

Step 4 :- After Click on Edit Html.

Step 5 :- Then Copy The Given Css Code and Put it Above The </head>.

<style type="text/css">
/* Mouse Click Effect Css By Www.SmartTechMukesh.Com */
.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 6 :- Then Copy The Given JavaScript Code and Put it Above The </body>.

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

Step 7 :- Finally, Don't Forget To Click on Theme.

Conclusion :-

You all must have understood this easy way to add mouse click effect on blogger website. In this post I told how to add mouse click effect in blogger. I hope this tutorial can be useful for all of you new and old bloggers and developers. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com