Chào các bạn, cũng có nhiều bạn thắc mắc hỏi mình cách chèn các nút gọi, zalo, facebook vào Website nên hôm nay mình mạn phép hướng dẫn các bạn chèn vào Website 1 cách chi tiết dễ dàng.
Tạo nút gọi điện, chat Zalo và chat Facebook cho website
Link demo cho các bạn tham khảo nhé: https://dulich.web2m.com
Đối với Website sử dụng giao diên Flatsome:
Bước 1: Copy HTML&CSS dán vào Footer Script:
Trên thanh đen đen trên cùng (Admin Bar) có chữ Flatsome, các bạn rê chuột vào Advanced – Global Setting và tìm đến Footer Script.
Sau đó, bạn copy toàn bộ đoạn code sau vào Footer Script nhé:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <style>.float-contact { position: fixed; bottom: 20px; left: 20px; z-index: 99999; } .chat-zalo { background: #8eb22b; border-radius: 20px; padding: 0 18px; color: white; display: block; margin-bottom: 6px; } .chat-face { background: #125c9e; border-radius: 20px; padding: 0 18px; color: white; display: block; margin-bottom: 6px; } .float-contact .hotline { background: #d11a59!important; border-radius: 20px; padding: 0 18px; color: white; display: block; margin-bottom: 6px; } .chat-zalo a, .chat-face a, .hotline a { font-size: 15px; color: white; font-weight: 400; text-transform: none; line-height: 0; } @media (max-width: 549px){ .float-contact{ display:none } }</style> <div class="float-contact"> <button class="chat-zalo"> <a href="http://zalo.me/0902506099">Chat Zalo</a> </button> <button class="chat-face"> <a href="http://m.me/trongvy1702">Chat Facebook</a> </button> <button class="hotline"> <a href="tel:0902506099">Hotline: 0902506099</a> </button> </div> |
Bước 2: Thay đổi thông tin số điện thoại, Zalo, facebook
Thông tin ở đoạn code trên là thông tin demo của mình, khi copy sang website của các bạn thì các bạn phải đổi thông tin thành của các bạn.
Các bạn có thể đổi thông tin trong các mục sau:
1 2 3 4 5 | <button class="chat-zalo"> <a href="http://zalo.me/so_dien_thoai_zalo">Chat Zalo</a> </button> <button class="chat-face"> <a href="http://m.me/tai_khoan_facebook">Chat Facebook</a> </button> <button class="hotline"> <a href="tel:so_dien_thoai_cua_ban">Hotline: so_dien_thoai_cua_ban</a> </button> |
- so_dien_thoai_zalo: Chèn số điện thoại bạn sử dụng Zalo.
- tai_khoan_facebook: Tài khoản facebook của bạn (Có thể là ID facebook cũng được).
- so_dien_thoai_cua_ban: số điện thoại bạn sử dụng.
Bước 3: Lưu lại và hưởng thành quả
Sau khi bạn copy code và sửa thông tin trong footer script, bạn lưu lại và ra trang chủ hưởng thành quả nhé!
Đối với theme bất kỳ không phải Flatsome
Bước 1: Copy HTML&CSS dán vào Footer
Các bạn copy đoạn HTML&CSS trên (Giống với Flatsome) sau đó vào Quản trị – Giao diện – Sửa – Chọn theme đang sử dụng – Footer.php và paste vào giữa thẻ đóng </body> và </html>.
Bước 2: Chỉnh sửa thông tin
Các bạn thực hiện các thao tác chỉnh sửa thông tin như ở trên mình hướng dẫn (cho theme Flatsome)
Bước 3: Lưu lại và hưởng thành quả
Cuối cùng, các bạn nhấn vào cập nhật tập tin và ra trang chủ xem sự thay đổi nha!
Lời kết
Như vậy là mình đã hoàn thành việc hướng dẫn các bạn tạo các nút gọi điện, chat zalo và chat Facebook nổi ở góc trái màn hình website WordPress rồi.
Nếu bạn không làm được hoặc bị mắc chỗ nào cũng vui lòng comment để mình hỗ trợ nhé!