Billboard Ads

Hướng dẫn cách thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho Blogger/Website

Table Of Contents

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.

Hướng dẫn cách thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho Blogger/Website
Hướng dẫn cách thay đổi con trỏ chuột và thêm hiệu ứng gợn nhấp cho Blogger/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkRaroYUIwIgEkwS94fkqorlAzewLiHBj3vrtNPYyaV_uNC3GzbCiMzxjYpbiTVW1Uiw_ts2Br4XI0I8KBzroKG5H-NeUatpqCTKGTLAHgxTn8u6WE_qieE0_m_hY7jznL2OgqxIU0uoz/s0/mouse-f1.png&quot;), auto;}
  a:hover{cursor:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_Ao58NwGm2lSh8yfOyG0i0D1IeFS3ruoahzz-JYJIX4G6pPLjcx3Qp5rZr_TSxw_66uuW5QvOAMhmZSj6cYWCfughKW9bl3mMWdaR7BLpLoa3HRdd86b_oqUo127xCQBntCMv2zkbGje/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ả.

Chú ý! 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é.

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

Read Also
9 comments
  1. Anh Trai Nắng
    2/22/2024 07:55:00 AM
    cho cái demo vào bài viết luôn để tham khảo chứ 😊
  2. A Đê Min
    2/23/2024 07:48:00 AM
    Mình đang không hiểu sao phải thêm cả js phức tạp thế nhỉ? Trong khi đó việc thay con trỏ chuột cho từng hành động của nó chỉ dùng CSS là xong mà 😅
    Ví dụ: https://www.blogspotvn.net/2019/05/cong-cu-tao-nhanh-code-thay-tro-chuot.html
    • Thành Trương Blog
      2/23/2024 11:40:00 AM
      Thêm JS để khi nhấp nó gợn gợn ấy
    • A Đê Min
      2/23/2024 03:44:00 PM
      À hiểu rồi, nhưng như thế hơi dài với cả phụ thuộc vào thư viện ngoài, có thể gọn hơn :D
      <style>
      .clicker {
      width: 60px;
      height: 60px;
      margin-left: -30px;
      margin-top: -30px;
      background: #21ccc9;
      border-radius: 100%;
      position: absolute;
      transform: scale(0);
      opacity: .3;
      transition: opacity 900ms ease, transform 900ms ease;
      z-index: 9999;
      pointer-events: none;
      }
      .clicker.is-active {
      opacity: 0;
      transform: scale(1);
      }
      </style>
      <script>
      document.addEventListener("mousedown", function(event) {
      var clicker = document.createElement("div");
      clicker.classList.add("clicker");
      clicker.style.left = event.clientX + "px";
      clicker.style.top = event.clientY + "px";
      document.body.appendChild(clicker);
      setTimeout(function() {
      clicker.classList.add("is-active");
      setTimeout(function() {
      clicker.remove();
      }, 900);
      }, 0);
      });
      </script>
    • A Đê Min
      2/23/2024 03:46:00 PM
      Dài quá, không hiển thị hết :D
      https://blogspotvn.github.io/test/click.html
  3. YMG
    2/24/2024 03:32:00 PM
    Blog mới tinh ("published": "2024-02-15T19:00:35-08:00"), Time Ago ảo thiệt... :))
  4. Thành Trương Blog
    2/24/2024 08:13:00 PM
    Oke quá đó bác, thank you!