Các bạn có để ý trên cùng blog của mình, gần chữ Nhận TSM Template có 1 icon trái tim đỏ đập đập như này không ? Thật thú vị và đặc sắc phải không nào?!
Và hôm nay mình sẽ chia sẻ cho các bạn cách để làm 1 trái tim như vậy. Thực ra nó chỉ là sự kết hợp giữa CSS và Font Awesome thôi nên sẽ không ảnh hưởng đến tốc độ tải trang đâu nhé :) Các bạn có thể hoàn toàn yên tâm.
Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán đoạn CSS dưới đây trước thẻ
]]></b:skin>
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
@keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
Bước 3: Chèn dòng code dưới vào nơi bạn muốn hiển thị trái tim đập đập nhé.
<i class="fa fa-heart animated infinite pulse" style="color:red"></i>
Ví dụ như ở blog mình thì mình chèn trước liên kết có dạng như sau:
<a href='/2017/08/qua-tang-chia-se-template-tsm-blogger.html'><i class='fa fa-heart animated infinite pulse' style='color:red'/> <font color='green'><b>Nhận TSM Template</b></font></a>
Ngoài ra, bạn có thể tùy ý chỉnh sửa màu sắc cho trái tim bằng cách sửa giá trị màu red ở đoạn dưới bằng màu bạn thích như green, yellow, tím....nhé!
style="color:red"
Bước 4: Lưu template lại và ra xem đã hiển thị được chưa.
Ok! Như vậy là mình vừa giới thiệu xong cho các bạn một hiệu ứng mới, vừa đẹp vừa đơn giản và rất độc đáo để làm đẹp thêm cho blog/website của bạn rồi đó :)
Chúc các bạn thành công nhé!
2 bình luận Tổng hợp bình luận
Mình xin lỗi. Blog mình k chấp nhận backlink như này nhé.