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.

क्लिक रिपल इफेक्ट क्या है?

जब आप अपनी ब्लॉगर वेबसाइट पर एक क्लिक रिपल इफेक्ट जोड़ते हैं, तो इसका मतलब है कि हर बार जब कोई उपयोगकर्ता किसी लिंक, बटन या इमेज पर क्लिक करता है, तो एक रिपल एनीमेशन दिखाई देगा। इसका उपयोग आपकी साइट में थोड़ी अन्तरक्रियाशीलता और दृश्य रुचि जोड़ने के लिए किया जा सकता है।

एक क्लिक तरंग प्रभाव क्यों जोड़ें?

रिपल इफेक्ट सबसे अच्छे एनिमेशन में से एक है जिसे आप अपनी ब्लॉगर वेबसाइट में जोड़ सकते हैं। यह आपकी वेबसाइट को अधिक पेशेवर और आधुनिक बनाता है। यदि आप तरंग प्रभाव जोड़ना नहीं जानते हैं, तो चिंता न करें! इस लेख में, हम आपको दिखाएंगे कि आप अपनी ब्लॉगर वेबसाइट में क्लिक रिपल इफेक्ट कैसे जोड़ सकते हैं।

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

download above code with step by step process

File Name: How to Add Click Ripple Effect in Blogger Website Uploaded By: uctcFile Size: 3kb