Tạo khung liên hệ hiệu ứng pulse độc đáo cho blogspot

Đối với mỗi blog/website, việc người đọc có thể gửi thắc mắc hay góp ý đến tác giả blog đó là điều vô cùng quan trọng. Nhưng nhiều khi việc để địa chỉ liên hệ ở đâu đó sẽ làm khó khăn trong việc tìm kiếm, chính vì vậy hôm nay mình sẽ chia sẻ cho các bạn một khung tích hợp nút đến trang liên hệ cũng như gửi thẳng tin nhắn qua mail. Sau đây hãy cùng mình tìm hiểu bài thủ thuật này nhé.

Demo

Các bước thực hiện

Bước 1: Truy cập quản trị blogger (blogger.com) - Chủ đề - Chỉnh sửa HTML

Bước 2: Chèn thư viện Font Awesome (v4.7) trước thẻ

</head>

(nếu có sẵn thư viện này rồi thì bỏ qua bước này)

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

Bước 3: Dán đoạn CSS dưới đây trước

]]></b:skin>

@-webkit-keyframes pulse{ 0%{ -webkit-transform:scale(1); transform:scale(1) } 50%{ -webkit-transform:scale(1.1); transform:scale(1.1) } 100%{ -webkit-transform:scale(1); transform:scale(1) } } @keyframes pulse{ 0%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } 50%{ -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1) } 100%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } } .pulse{ -webkit-animation-name:pulse; animation-name:pulse } .phucuong-fixbot { width: 100%; position: fixed; bottom: 0; background: rgba(35,44,59,1); z-index: 8000; left: 0; } .pc-link { position: relative; padding: 8px 15px; text-decoration: none; -webkit-transition: all .4s ease; transition: all .4s ease; color: #fff; font-weight: bold; display: inline-block; font-family: 'Roboto',sans-serif,Arial; } .pc-contact { background: #008638; display: inline-block; text-shadow: 1px 1px 2px rgba(0,0,0,.3); left: 50px; } .pc-contact:before { content: ""; display: block; position: absolute; top: -13%; left: -2%; border: 1px solid #008638; width: 104%; height: 250%; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .pc-contact:after { content: ""; background-color: rgba(21,255,101,.21); opacity: .75!important; display: block; position: absolute; top: -21%; left: -5%; width: 110%; height: 120%; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; z-index: -1; } .pc-contact:hover { background: rgba(0,0,0,.7); } .pc-info { margin-left: 6%; font-weight: normal; } .pc-info:hover { color: #008638; } .pc-info i { padding-right: 8px; }

Bước 4: Dán đoạn HTML hiển thị khung liên hệ trước thẻ

</body>

<div class="phucuong-fixbot"> <a href="https://www.phucuongblogger.com/p/contact.html" class="pc-link pc-contact">Gửi tin nhắn</a> <a href="mailto:phucuongblog@gmail.com" class="pc-link pc-info" rel="nofollow" target="_blank"><i class="fa fa-envelope"></i>phucuongblog@gmail.com</a> </div>

Thay:

• https://www.phucuongblogger.com/p/contact.html thành địa chỉ trang liên hệ của bạn
• mailto:phucuongblog@gmail.com thành địa chỉ mail của bạn

Bước 5: Lưu Template lại.

Lời kết

Trên đây là toàn bộ hướng dẫn để làm 1 khung liên hệ hiệu ứng pulse độc đáo cho blogspot rồi đấy. Chỉ cần vài dòng CSS đơn giản chúng ta đã có những tiện ích chuyên nghiệp hơn rồi, với sự sáng tạo của bạn thì hoàn toàn có thể khai thác sâu code để phát triển lên những cái mới mẻ hơn. Chúc các bạn thành công.