Cách thêm hiệu ứng trái tim khi nhấp chuột cho Blogspot

Cách thêm hiệu ứng trái tim khi nhấp chuột cho Blogspot 

Giới thiệu

Khi tạo một blog, ngoài chức năng, bạn cũng nên trang trí cho blog thêm phong phú về giao diện. Hiện nay trên mạng có rất nhiều cách để trang trí blog như: tuyết rơi khi rê chuột, dòng chữ theo trỏ chuột.... không thể không nhắc đến hiệu ứng trái tim nhiều màu sắc vô cùng đẹp mắt khi chúng ta nhấp vào bất kì chỗ nào trên giao diện blogspot. 

Cách thực hiện

Cách thêm hiệu ứng trái tim nhấp chuột cho Blogspot cũng rất dễ dàng.
Bạn truy cập vào trang quản lý Blogspot. Chọn Menu Chủ đề ➤ Chỉnh sửa HTML ➤ Nhấn Ctrl + F để hiển thị khung tìm kiếm thẻ </body>
Bạn chỉ cần thêm đoạn mã javascript sau vào trước thẻ </body> ấn Lưu; như vậy tất cả các công việc đã hoàn thành.
<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>
Nếu bạn đặt mã trong thẻ body, trang web sẽ tải nhanh hơn vì nội dung tải trước và sau đó xảy ra hiệu ứng nhấp vào trái tim. Tránh làm chậm nội dung chính của trang web.

Lời kết

Như vậy, trong bài viết này mình đã chia sẻ Cách thêm hiệu ứng trái tim khi nhấp chuột cho Blogspot để làm cho blog của bạn trông đẹp mắt hơn. Nếu bạn có thắc mắc gì hay khiếu nại về bản quyền thì hãy để lại comment bên dưới. Chúc các bạn thành công.

Đánh giá của bạn về bài viết này:

Thành Trương Blog

Bắt đầu mỗi ngày với một suy nghĩ tích cực và một trái tim biết ơn

4 Nhận xét

Mới hơn Cũ hơn

Comments

×Close