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.

Copyright © ReLub.Net

ReLub.Net

youtube google facebook Đôi khi cuộc sống không được như ý muốn của ta, bạn hãy cứ cho đi. Cho đi là cách bạn đã tự yêu thương lấy chính bản thân mình.

4
Nhận xét

➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Bạn hãy dán link ảnh vào khung bình luận và ấn xuất bản, ảnh sẽ được tự động tải lên.
➥ 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

Chúc mừng năm mới Chúc mừng năm mới