How To Add Mouse Click Effect in Blogger ?

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.

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

Admin

Hey there! My name is Mukesh Kushwaha, I am a Professional Web Designer, Graphic Designer, UI/UX Designer, Logo Designer and Banner Designer. I am Content Creator from Bihar State, India. I love coding and editing, so I always try to create something new and interesting.
facebook instagram twitter pinterest telegram

1 Comments

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

Previous Post Next Post