Adding Click Ripple Effect In Blogger Website (Touch Ripple Effect)

 Hello Bloggers ! How are you. I hope you are doing 😃 great 👍.

So today we are going to talk 🦜 about Adding click Ripple effect in your blogger website.

This effect is very awesome and attractive.

Click anywhere in this page and you will see the effect only in this post.

In this seperate post I have used this effect. If you click or touch any where in the blog, the click Ripple effect will work and you can see it how beautiful it look when we touch it.

It is very effective when viewers see your blog and see the effect and they search for it to how to add this effect.

So why so wait let's follow the below steps and add it to your blog also.

Steps to Add Click Ripple Effect

Follow the below steps carefully 👇🏻👇🏻

Before following this steps please take back-up of your theme to make your blog safe. And I am not responsible for any kind of destruction of your site.

Step 1

1. Open Blogger Website
2. Go to Themes Section and click on edit theme.
3. Now search for the </head> tag in your theme.
4. 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 2

1. Now adding the CSS code.
2. Now search 🔎 for </b:skin> tag for adding the below CSS code.
3. 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 3

1. Now adding the js
2. Now search 🔍 for </body> tag in your theme. It must be located on the bottom of your template.
3. Copy and paste the below code just above </body> closing tag.
4. Now done.

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

Note : After completing this don't forgot to save the theme.

Demo

So I hope you have completed all the given steps above successfully and installed ripple effect in your blog.

Conclusion

So in this blog we have discussed about installing and adding click Ripple effect in blogger website.

I hope everyone like our post, so please 🥺 rate it below. And don't forgot to put a comment.

If you are having any problems or query related to this post please comment below.

Reference :
Tech With Deo

Go to Link