[Blogger] Thêm hiệu ứng trái tim đập loạn nhịp cho blogspot

Hiệu ứng này khá hay và đẹp mắt khi có thêm css3, bạn có thể thấy nó ngay dưới phần chân trang của tôi. Hiệu ứng chỉ gồm html và css vì thế hoàn toàn không ảnh hưởng tới tốc độ tải trang của bạn. Ok giờ hãy tiến hành ngay thôi

Trước tiên hãy đảm bảo blog của bạn đã nhúng font awesome Nếu chưa có bạn hãy thêm đoạn code sau vào trước thẻ </head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

Tiếp theo bạn đặt đoạn code HTML này vào bất cứ vị trí nào bạn muốn trái tim xuất hiện

<i class='pulse fa fa-heart fa-lg' style='color:#FF0000;font-size: 1.5em'/>

Có thể thay đổi giá trị font-size cho phù hợp với font chữ trên website của bạn
Cuối cùng là thêm css3 bằng cách dán đoạn code sau trước thẻ đóng </body>

<style type='text/css'>
.pulse{-webkit-animation:pulse .8s linear infinite;-moz-animation:pulse .8s linear infinite;-ms-animation:pulse .8s linear infinite;animation:pulse .8s linear infinite}
@keyframes "pulse"{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}
@-moz-keyframes pulse{0%{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(0.8);transform:scale(0.8)}100%{-moz-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes "pulse"{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-ms-keyframes "pulse"{0%{-ms-transform:scale(1);transform:scale(1)}50%{-ms-transform:scale(0.8);transform:scale(0.8)}100%{-ms-transform:scale(1);transform:scale(1)}}
</style>

Lưu template lại và xem kết quả !

Bạn có thể xem live tại đây
 DEMO Good Luck !