Hello, Bloggers! Welcome to Raghavendra Technic.
In this tutorial, we are going to show you How to Add Ripple Effect in Blogger Website
Introduction: Ripple effect
A ripple effect can add depth and interactivity to your site. It's a subtle effect, but it can make a big difference in the overall user experience.
What is a ripple effect?
When you add a ripple effect to your blogger website, it means that every time a user on a link, button, or image, a ripple animation will appear. This can be used to add a bit of interactivity and visual interest to your site.
Why add a ripple effect?
The Ripple effect is one of the best animations that you can add to your blogger website. It makes your website look more professional and modern. If you don't know how to add a ripple effect, don't worry! In this article, we will show you how to add a ripple effect in your blogger website.
How to add a ripple effect on the Blogger website?
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Ripple effect by (T.MK) */ .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} .drk .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 6: Now search the code </head> and paste the following Codes just below to 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>
Step 7: Now search the code </body> and paste the following Codes just below to 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>Step 8: Now click on Save by clicking this icon
Step 9: That's done!
Conclusion
In this article I have made a tutorial on How to Add Ripple Effect in Blogger Website. I hope you have liked it and Please do share with your friends and follow our blog for more
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved
© Copyright:
raghavendratechnic.blogspot.com