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
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 |
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqkRaroYUIwIgEkwS94fkqorlAzewLiHBj3vrtNPYyaV_uNC3GzbCiMzxjYpbiTVW1Uiw_ts2Br4XI0I8KBzroKG5H-NeUatpqCTKGTLAHgxTn8u6WE_qieE0_m_hY7jznL2OgqxIU0uoz/s0/mouse-f1.png"), auto;}
a:hover{cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_Ao58NwGm2lSh8yfOyG0i0D1IeFS3ruoahzz-JYJIX4G6pPLjcx3Qp5rZr_TSxw_66uuW5QvOAMhmZSj6cYWCfughKW9bl3mMWdaR7BLpLoa3HRdd86b_oqUo127xCQBntCMv2zkbGje/s0/mouse-f2.png"), 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é.
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ả.
Thông tin liên hệ:
Thành Trương Blog
Chịu trách nhiệm nội dung: Nguyễn Thành Trương
Địa chỉ: Xã Tân Thành, Huyện Bình Tân, Tỉnh Vĩnh Long
Email: thanhtruongblog@gmail.com
Số điện thoại: 0973.898.830
Website: https://www.thanhtruongblog.com/
Nguồn: https://www.thanhtruongblog.com/2024/02/thay-doi-con-tro-chuot-va-them-hieu-ung-gon-nhap.html
9 comments
➥ 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
Ví dụ: https://www.blogspotvn.net/2019/05/cong-cu-tao-nhanh-code-thay-tro-chuot.html
<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");
…
https://blogspotvn.github.io/test/click.html