How To Add Show Touch Blogger Website | Touch Ripple Blogger Website

What is a click ripple effect? 

When you add a click ripple impact to your blogger web site, it implies that on every occasion a user clicks on a link, button, or image, a ripple animation can seem. this will be wont to add a touch of interactivity and visual interest to your website. 

Why add a click ripple effect? 

The Ripple impact is one in every of the most effective animations that you simply will boost your blogger web site. It makes your web site look additional skilled and fashionable. If you do not knowledge to feature a ripple impact, do not worry! during this article, we are going to show you the way to feature a click ripple impact in your blogger web site.

How to add a click ripple impact on the Blogger website?

Important!
Before we tend to begin adding codes in XML, i will be able to suggest you to require a Backup of your current theme.
By chance if any downside happens, you'll restore it later.

Step 01: First of all Login to your Blogger Dashboard.

Step 02: On Blogger Dashboard, click Theme.

Step 03: Click the  next to 'customize' button.

Step 04: Click Edit HTML you will be redirected to editing page.

Step 05: Now search the code </head> and paste the following JavaScript codes just above to it.

.HTML

      
      <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 06: Now adding the CSS code. 

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

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

 

.CSS

      
      .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 09: Now adding the JavaScript code. 

  

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

  

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

 

Javascript

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

Complete Your Coding.