Recently Updated Post

Recently Updated Post ~~
    Font Size

    How to Add Click Ripple Effect in Blogger Website

    Introduction: Click ripple effect 

    A click 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 click ripple effect? 

    When you add a click ripple effect to your blogger website, it means that every time a user clicks 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 click 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 click ripple effect in your blogger website.

    How to add a click 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 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.

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

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

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

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



    Terms of Use

    To appreciate our workshop, consider keeping the credits in canons. We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization

    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. © NS DESIGN | All Rights Reserved

    ©️ Copyright Reserved: NS DESIGN

    Getting Info...

    About the Author

    Hello! I am MUSTAKIM - Designer at NS Design Templates who provides the best blogger templates, amazing features, SEO friendly, Responsive designs, and Google AdSense friendly.

    تعليقان (2)

    1. Is this lazy loaded or heavy that create speed error?
      1. lazy loaded .. there is no error with page speed

    Emoticon

    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.