Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Click Ripple Effect 

Let's Begin

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: Now search for the </head>  tag in your theme. .

Step #5: Now add the below code just above your </head>  tag.

<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

Step #6: Now search for </b:skin>  tag for adding the below CSS code.

Step #7: Copy and paste the below given code just above </b:skin>  tag.

.clicker {width:60px;height:60px;margin-left:-30px;margin-top:-30px;background:#204ecf;border-radius:100%;position:absolute;transform:scale(0);opacity:.3;-ms-filter:none;filter:none;z-index:9999;pointer-events:none}.darkMode .clicker{background:#fff}.clicker.is-active{opacity:0;-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);transition:opacity 900ms ease,transform 900ms ease;transform:scale(1)}

Step #8: Now search for </body> tag in your theme. It must be located on the bottom of your template

Step #9: Copy and paste the below code just above closing </body> tag

<script>/*<![CDATA[*/ (function(){var i=function(n,t){return window.setTimeout(t,n)},o={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},e=function(n,t){var i,o="touchstart"===n.type.toLowerCase();switch(t){case"top":i="pageY";break;case"left":i="pageX"}return(o?n.originalEvent.touches[0]:n)[i]};$(document).on("mousedown touchstart",function(n){var t=$('<div class="clicker"></div>');return t.css({left:e(n,"left"),top:e(n,"top")}),$("body").append(t),i(0,function(){return t.on(o[Modernizr.prefixed("transition")],function(){return t.remove()}),t.addClass("is-active")})})}).call(this); /*]]>*/</script>

 

Step #10: Now click on save theme.

I hope you were able to successfully add the Add Click Ripple Effect to your Blogger blog after completing the preceding steps. Please contact us if you experience any kind of issue.

Before starting always backup your template for any kind of error and easy restoration.

Copyright:
www.abdullahdcurz.blogspot.com

Go to Link

Go to Link