Advertisement

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

Minh CRISTIANO
tháng 1 05, 2023
Last Updated

 

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

Chào các bạn lại là mình đây, hôm nay mình thấy một code khá hay sẽ giúp các bạn trang trí blog. Cái này chỉ hiển thị khi dùng máy tính thôi nha, khi nhấp chuột vào một nơi bất kỳ trong blog thì sẽ hiện ra một hàng trái tim đủ 7 sắc cầu vồng. Trước khi vào bài viết mình xin 5s ấn vào cái chuông để đón nhận những bài viết mới nhất nhé!

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

Bước 1: Truy cập vào blogger

Bước 2: Chọn Chủ đề ➤ Chỉnh sửa HTML ➤ Nhấn Ctrl + F tìm đến </body> 

Bước 3: Dán đoạn javascript vào trước </body> 

<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 4: Nhấn Lưu!

Lời Kết

Trên đây là toàn bộ cách thêm hiệu ứng trái tim khi nhấp chuột cho Blogspot và nguồn của Minh CRISTIANO Blog nha, nếu có vấn đề về khiếu nại hay bản quyền thì hãy comnent xuống bên dưới. Chúc các bạn ngày làm việc hiệu quả.

TrendingMore

Xem thêm