Home
Blogger

How to add Ripple click effect in Blogger


Hello guys, welcome to Shiva Technic World. Nowadays you might be seen the ripple effect on some Blogger websites and you might be thinking about how to add a ripple click effect to your Blogger website. So in this tutorial, we are going to show you how to add a ripple click effect in Blogger.  It is very attractive and awesome, When visitors click anywhere it will show a ripple effect where visitors click. It might increase your website impression and visitors might ask you how to add it. By following this tutorial you can easily add ripple click effect without coding knowledge.

Want to see how it looks?
Demo

So without wasting any time let's check how to add a ripple click effect in Blogger!

How to add ripple click effect in Blogger?

Before doing these steps please take the backup of your template. By chance, if any mistake has done you can restore it later.

You can copy the codes by double-clicking on the code box!

  • First, go to the Blogger dashboard
  • Then select the Theme option
  • Then click on the drop-down menu icon near Customize
  • Then go to the Edit HTML option
  • Then find </head> or &lt;!--<head/>-&gt;&lt;/head&gt;
Now copy this code and paste just above it
<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>
Then find ]]></b:skin> and paste this CSS just above it
.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)}
Then find </body> or &lt;!--</body>--&gt;&lt;/body&gt; and copy this javascript and paste just above it
<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>
Then save HTML.

Now you successfully installed the ripple click effect on your Blogger website!

Conclusion

Hope this How to add Ripple click effect in Blogger article is useful to you. Do share with your friends. If you have any doubts related to this article ask me in the comment or join our Telegram group.

Thanks for visiting!

Have a nice day!