Hướng dẫn thêm nhấp chuột hiệu ứng gợn sóng Web/Blogger

Giới thiệu: Khi nhấp chuột hiệu ứng gợn sóng

Hiệu ứng gợn nhấp chuột có thể thêm chiều sâu và tính tương tác cho trang web của bạn. Đó là một hiệu ứng tinh tế, nhưng nó có thể tạo ra sự khác biệt lớn trong trải nghiệm người dùng tổng thể.

Hướng dẫn thêm nhấp chuột hiệu ứng gợn sóng Web/Blogger

Hiệu ứng gợn khi nhấp chuột là gì?

Khi bạn thêm hiệu ứng gợn sóng nhấp chuột vào trang web blogger của mình, điều đó có nghĩa là mỗi khi người dùng nhấp vào liên kết, nút hoặc hình ảnh, hoạt ảnh gợn sóng sẽ xuất hiện. Điều này có thể được sử dụng để thêm một chút tương tác và sự quan tâm trực quan đến trang web của bạn.

Tại sao lại thêm hiệu ứng gợn nhấp chuột?

Hiệu ứng Ripple là một trong những hình ảnh động tốt nhất mà bạn có thể thêm vào trang web blogger của mình. Nó làm cho trang web của bạn trông chuyên nghiệp và hiện đại hơn. Nếu bạn không biết cách thêm hiệu ứng gợn sóng, đừng lo lắng! Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm hiệu ứng gợn nhấp chuột vào trang web blogger của bạn.

Hướng dẫn thêm nhấp chuột hiệu ứng gợn sóng Web/Blogger

Quan trọng!
Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.

Bước 01: Trước hết, Đăng nhập vào Bảng điều khiển Blogger của bạn

Bước 02: Trên Bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 03: Nhấp vào nút tiếp theo để 'tùy chỉnh'

Bước 04: Nhấp vào Chỉnh sửa HTML bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 05: Bây giờ tìm kiếm mã </head> và dán các mã JavaScript sau ngay bên trên vào nó.

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

Bước 06: Bây giờ thêm mã CSS

Bước 07: Bây giờ tìm kiếm </b:skin> thẻ để thêm mã CSS bên dưới.

Bước 08: Sao chép và dán đoạn mã đã cho bên dưới ngay trên </b:skin>.

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

Bước 09: Bây giờ thêm mã JavaScript

Bước 10: Bây giờ tìm kiếm </body> thẻ trong chủ đề của bạn. Nó phải nằm ở cuối mẫu của bạn.

Bước 11: Sao chép và dán đoạn mã bên dưới ngay trên </body>.

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

Hoàn thành!

Note!
Sau khi hoàn thành, đừng quên lưu chủ đề.

Truy cập Bypass Google Account APK để tải file APK nhé