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é.

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

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.

DMCA.com Protection Status

Blog mình đã bỏ hệ thống bình luận Blogspot và thay thế bằng bình luận Facebook từ ngày 11/07/2018 nên hơn 3k bình luận trước đó sẽ không còn hiển thị nữa. Nếu bạn không nhận được phản hồi về thắc mắc của bạn trong mỗi bài viết thì liên hệ trực tiếp với mình qua PCB Fanpage.