Thêm nút gọi Zalo dưới góc cho Blogspot đơn giản và thuận tiên liên hệ, nút liên hệ này ưu điểm nhẹ vì chỉ có các thành phần HTML & CSS nhưng vẫn có hiệu ứng rung lắc khá bắt mắt.
Nút gọi Zalo cho Blogspot là gì?
Nút gọi Zalo cho Blogspot (hay nút liên hệ Zalo, icon Zalo nổi) là một tiện ích tương tác được tích hợp vào mã nguồn của trang web chạy nền tảng Blogspot (Blogger).
Khi khách truy cập nhấp vào nút này:
- Trên máy tính: Hệ thống sẽ mở ứng dụng Zalo PC hoặc chuyển hướng đến trang quét mã QR/nhắn tin trực tiếp với số điện thoại của bạn.
- Trên điện thoại: Điện thoại sẽ tự động mở ứng dụng Zalo và chuyển thẳng vào khung chat với bạn ngay lập tức.
Lợi ích khi sử dụng
- Tăng tỷ lệ chuyển đổi: Giúp khách hàng dễ dàng kết nối, tư vấn hoặc mua hàng nhanh chóng chỉ với một cú click mà không cần lưu số điện thoại.
- Giao diện chuyên nghiệp: Thường được thiết kế dạng nút nổi (Floating Widget) ở góc màn hình (thường là góc phải hoặc trái bên dưới), luôn hiển thị dù người dùng cuộn trang.
- Tối ưu cho Blogspot: Dễ dàng cài đặt chỉ bằng một đoạn mã HTML/CSS/JavaScript chèn vào tiện ích (Gadget) hoặc trực tiếp vào tệp chủ đề (Theme) của Blogger.
Mẫu code tích hợp cơ bản
Cách nhanh nhất để thêm nút Zalo nổi vào Blogspot là dán đoạn mã HTML và CSS tùy chỉnh vào phần <body> hoặc thông qua tiện ích Tiện ích HTML/JavaScript trong trang quản trị Blogger, với liên kết Zalo dạng https://zalo.me.
 |
| Thêm nút gọi Zalo cho Blogspot |
Các bước thực hiện
- Đăng nhập vào trang quản trị Blogger.
- Chọn mục Bố cục (Layout) ở menu bên trái.
- Nhấp vào Thêm tiện ích (Add a Gadget) ở vị trí bất kỳ (thường chọn ở cuối trang).
- Chọn tiện ích HTML/JavaScript.
- Dán đoạn mã mẫu dưới đây vào ô nội dung (nhớ đổi 0912345678 thành số điện thoại Zalo của bạn):
Toàn bộ code nút Zalo
Nhấp Lưu (Save) và tải lại trang blog để kiểm tra.<style>#button-contact-vr { position: fixed; bottom: 20px; left: 20px; z-index: 9999; }.phone-vr { position: relative; width: 70px; height: 70px; cursor: pointer; }/* Vòng tròn rung và tỏa sáng */.phone-vr-circle-fill {width: 50px; height: 50px; top: 10px; left: 10px;position: absolute; border-radius: 50%;background-color: rgba(33, 150, 243, 0.4);animation: zoom 1.3s infinite;}/* Nút chính chứa icon */.phone-vr-img-circle {background-color: #2196F3;width: 40px; height: 40px; top: 15px; left: 15px;position: absolute; border-radius: 50%;display: flex; justify-content: center; align-items: center;animation: phone-shake 1s infinite ease-in-out;}.phone-vr-img-circle img { width: 25px; height: 25px; }/* Animations */@keyframes zoom {0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }70% { transform: scale(1.5); box-shadow: 0 0 0 15px transparent; }100% { transform: scale(0.9); }}@keyframes phone-shake {0%, 100% { transform: rotate(0); }10%, 30%, 50% { transform: rotate(-20deg); }20%, 40%, 60% { transform: rotate(20deg); }}</style><div id="button-contact-vr"><div class="phone-vr" id="zalo-vr"><a href="https://zalo.me/0912345678" target="_blank"><div class="phone-vr-circle-fill"><div class="phone-vr-img-circle"><img alt="Zalo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvVWLEn8Ou3TBCh55LX34OY8Y8kmmIzxdnkz1BnJJGnnxTcEGfHwoDXasW8UXlWRh6KXUaUTbc0mwlKkE2cTKK72Inm1pCiZMsa3sasRcD0DwmQDBSucvU82gsuLyE2TTOyQUvwEjG4LbpfU2orlXT_DjGjvJPHGiIu8qfVT_OwcZYsFWIEBHOAt9TFPI/s1600/zalo.png" /></div></div></a></div></div>
