[Blogspot] Làm trái tim đỏ đập đập cực kì đẹp cho blog/website

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.
Cách thực hiện:
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é!

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

2 bình luận Tổng hợp bình luận

avatar
Nhận xét này đã bị quản trị viên blog xóa.
avatar

Mình xin lỗi. Blog mình k chấp nhận backlink như này nhé.

ĐĂNG KÍ NHẬN BÀI VIẾT MỚI

Please Enable Javascript!Enable JavaScript