How to Add Click Ripple Effect in Blogger Website

Introduction: Click Ripple Effect

Want to make your Blogger website feel more engaging and interactive? A click ripple effect is a simple yet powerful way to do that. This subtle animation responds whenever users click on a button, link, or image, giving your site a more modern and dynamic look.

What is a Click Ripple Effect?

A click ripple effect is an animation that appears like a wave or ripple spreading out from the point where the user clicks. Instead of a plain, static click, your visitors see a smooth animation that makes interactions feel more intuitive and fun.

Why Should You Add It to Your Blogger Site?

• Gives your website a professional and modern look.
• Makes clicks feel interactive and lively.
• Enhances the user experience with subtle animations.

Don’t worry if you’re not a coding expert—this guide will walk you step by step on how to add a click ripple effect to your Blogger theme.

Important: Before making any changes, always backup your Blogger theme. If something goes wrong, you’ll be able to restore it without any trouble.

Steps to Add a Click Ripple Effect in Blogger

Step 1: Log in to Blogger

Go to your Blogger Dashboard and sign in with your Google account.

Step 2: Open Theme Settings

On the left sidebar, click Theme.

Step 3: Enter HTML Editor

Next to the Customize button, click the downward arrow and choose Edit HTML.

Step 4: Add Required Script Libraries

Search for the </head> tag in your theme. Just above it, paste the following JavaScript library links:

<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 5: Add Ripple Effect CSS

Scroll down and look for the </b:skin> tag. Above it, paste the following CSS code:

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

Step 6: Add Ripple Effect JavaScript

Scroll to the very bottom of your theme and find the </body> closing tag. Just above it, paste this code:

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

Final Step: Save Your Theme

Once you’ve added all the codes, click Save in the top-right corner of the editor.

Done! 🎉

Now refresh your Blogger website and try clicking on buttons, links, or images—you’ll see the ripple animation in action.

Pro Tip: If you use dark mode on your blog, the ripple will automatically adapt to show up in white for better visibility.