Đăng ký kênh Youtube

Thay Đổi Con Trỏ Chuột Và Thêm Hiệu Ứng Gợn Nhấp Cho Blog/Website

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
code thay đổi con chuột cho blog
Hướng dẫn thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho blog/website

Bạn đã quá nhàm chán với hình ảnh của con trỏ chuột mặc định. Chính vì lẽ đó trong bài viết này mình sẽ hướng dẫn các bạn thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp khi bạn click vào bất kì vùng nào trên blog/website.


Chia sẻ code thay đổi con chuột và hiệu ứng gợn nhấp cho blog/website

Có rất nhiều cách và nhiều sự lựa chọn cho việc thay đổi hình dáng con trỏ chuột. Tuy nhiên, trong bài viết này Chia Sẻ Vip sẽ hướng dẫn bạn tạo nên sự độc đáo của con trỏ chuột nhé.

Các bước thực hiện như sau:

Bước 1: Đăng nhập vào trang quản lý Blogger.

Bước 2: Vào tùy chỉnh HTML.

Bước 3: Bạn copy toàn bộ đoạn js bên dưới và dán trên thẻ <head>

       
     <script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'/>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
 

Bước 4: Bạn copy toàn bộ đoạn code bên dưới và dán trên thẻ </body>

    
    <style>
     .clicker {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    background: #21ccc9;
    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)
}
html,body{cursor:url(&quot;https://1.bp.blogspot.com/-qbWo9mPKO2Y/YL9utYdQBdI/AAAAAAAAFs4/mtjGu6u2uGwtJsT4gZG4lbhLV1a5lG6OQCLcBGAsYHQ/s0/mouse-f1.png&quot;), auto;}
	a:hover{cursor:url(&quot;https://1.bp.blogspot.com/-nYv2dLl3oXY/YL9utYBCh8I/AAAAAAAAFtA/wII4lVw5w4k-4isGMY41heTqk8U4TJujgCLcBGAsYHQ/s0/mouse-f2.png&quot;), auto;}
    </style>
    <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>
      

Bước 5: Bạn lưu lại và xem kết quả.

Bạn có thể thay đổi hình ảnh con trỏ chuột tùy thích bằng cách thay đổi 2 link ảnh bên trên. Hiệu ứng gợn nhấp vẫn được áp dụng trên mobile các bạn nhé.

Video hướng dẫn chi tiết thay đổi hình dáng con trỏ chuột và thêm hiệu ứng gợi nhấp.

Kết luận

Trên đây là bài chia sẻ cách thay đổi con chuột và thêm hiệu ứng gợi nhấp cho blog/website. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.

Post a Comment

➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Bạn hãy dán link ảnh vào khung bình luận và ấn xuất bản, ảnh sẽ được tự động tải lên.
➥ Bạn có thể Upload Ảnh bất kì để lấy link và dán vào khung bình luận và ấn xuất bản ảnh sẽ được tải lên.
➥ Không spam trong khung bình luận, hạn chế viết tắt.
➥Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
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.