Code hiệu ứng click chuột thả tim cho Website/Blogger

Trong bài viết này, Tin Tức 247 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?

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.

Mình 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.Nếu có thắc mắc gì hãy để lại ý kiến bên dưới nhé.

2 Comments

Previous Post Next Post