Blog iTeam OS
Trang chủ
Blogspot Tips

Hướng dẫn thêm hiệu ứng nhấp trái tim trong Blogger?

Xin chào các bạn, chào mừng tất cả các bạn trong bài viết mới hôm nay. Trong bài viết này, tôi sẽ chia sẻ với tất cả các bạn một hướng dẫn về cách thêm hiệu ứng trái tim trên blogger. Hiệu ứng trái tim này sẽ xuất hiện trên trang web của bạn khi có hiệu ứng nhấp chuột.

Hướng dẫn thêm hiệu ứng nhấp trái tim trong Blogger
Hướng dẫn thêm hiệu ứng nhấp trái tim trong Blogger?
Demo (xem trục tiếp tại bài viết)

Hiệu ứng này được tạo bằng HTML, CSS và JavaScript, nhưng đã được hợp nhất với nhau và chuyển đổi sang JavaScript. Bạn có thể đã truy cập các trang web hoặc blog của người khác và khi bạn nhấp vào nó, các hiệu ứng như hiệu ứng tình yêu, hiệu ứng mạn đà la, v.v.

Tôi sẽ chia sẻ hướng dẫn về điều này trong bài đăng này để bạn có thể dễ dàng sử dụng nó trên blog của mình bằng cách đọc bài đăng này. Làm theo các bước đã cho cho đến khi kết thúc.

Cách thêm hiệu ứng nhấp trái tim trong Blogger: -

Bước 1 :- Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.

Bước 2 :- Trên Trang tổng quan Blogger, nhấp vào Chủ đề .

Bước 3 :- Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy Chỉnh' .

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

Bước 5 :- Sau đó sao chép mã JavaScript đã cho và đặt bên dưới </body>.

<!-- Heart Click Effect Animation -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'>
</script>
<script type="text/javascript">
//<![CDATA[
!function(e,t,a){function n(){c(".heart{width:10px;height:10px;position:fixed;background:#f00;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}.heart:after,.heart:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;position:fixed}.heart:after{top:-5px}.heart:before{left:-5px}"),o(),r()}function r(){for (var e = 0;e < d.length;e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale += .004,d[e].alpha -= .013,d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");requestAnimationFrame(r)}function o(){var t = "function" == typeof e.onclick && e.onclick;e.onclick = function(e){t && t(),i(e)}}function i(e){var a = t.createElement("div");a.className = "heart",d.push({el:a,x:e.clientX - 5,y:e.clientY - 5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a = t.createElement("style");a.type = "text/css";try{a.appendChild(t.createTextNode(e))}catch (t){a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var d = [];e.requestAnimationFrame = function(){return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e){setTimeout(e,1e3 / 60)}}(),n()}(window,document);//]]>
</script>

Bước 6 :- Cuối cùng, nhấp vào Lưu lại

Kết luận :-

Đây là một cách dễ dàng để thêm hiệu ứng nhấp vào trái tim trên trang web của blogger, tất cả các bạn chắc hẳn đã hiểu. Trong bài đăng này, tôi đã nói với cách thêm hiệu ứng nhấp vào trái tim trên blogger . Tôi hy vọng hướng dẫn này có thể hữu ích cho tất cả các bạn blogger và nhà phát triển. Cảm ơn bạn đã ghé thăm trang web của chúng tôi.

Tham khảo:
iTeam OS

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