Tạo các nút gọi, chat Zalo và chat Facebook trên Web

 

Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS

Chào các bạn, web nhthang.com được mình trang bị sẵn một số nút tiện ích nổi ở góc trái màn hình như nút Gọi điện, chat Zalo hay chat Facebook. Một số bạn rất thích nhưng không biết làm cách nào nên đề nghị mình hướng dẫn. Do đó, hôm nay mình tranh thủ viết bài hướng dẫn các bạn cùng tạo nút gọi điện luôn nha!

Tạo nút gọi điện, chat Zalo và chat Facebook cho website

Các bạn có thể nhìn hình để hình dung, hoặc vô xem tại website giuseart.com trên giao diện PC và mobile luôn nha!

Hướng dẫn tạo các nút liên hệ nhanh cho website bằng html và css

Nào giờ ta bắt đầu luôn nhé!

Đối với theme Flatsome:

Bước 1: Truy cập vị trí gắn code

Trên thanh đen đen trên cùng – Flatsome – Advanced – Global Setting – Truy cập Footer Script

Bước 2: Paste toàn bộ đoạn code này vào:

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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

<style> .giuseart-mobile-contact-bar{ display:none } .giuseart-pc-contact-bar{ left: 30px; bottom: 30px; position: fixed; z-index: 998; margin-bottom:0 } .giuseart-pc-contact-bar li{ width: 44px; height: 46px; overflow: hidden; margin-bottom: 0; list-style: none; } .giuseart-pc-contact-bar li.facebook{ margin-bottom: 8px; background: url(https://giuseart.com/wp-content/uploads/2020/03/fb.png); background-repeat: no-repeat; } .giuseart-pc-contact-bar li.zalo{ background: url(https://giuseart.com/wp-content/uploads/2020/03/zl.png);    background-repeat: no-repeat; } .giuseart-pc-contact-bar li a{ display: block; width: 44px; height: 44px; }   @media only screen and (max-width: 499px) { .giuseart-pc-contact-bar{ display:none } .giuseart-mobile-contact-bar{ left: 10px; bottom: 10px; position: fixed; z-index: 998; margin-bottom:0; display:block !Important } .giuseart-mobile-contact-bar li{ display:inline-block; float:left; margin-right:7px; list-style:none } .giuseart-mobile-contact-bar li.facebook{ margin-bottom: 8px; background: url(https://giuseart.com/wp-content/uploads/2020/03/fb.png); background-repeat: no-repeat; } .giuseart-mobile-contact-bar li.zalo{ background: url(https://giuseart.com/wp-content/uploads/2020/03/zl.png);    background-repeat: no-repeat; } .giuseart-mobile-contact-bar li a{ display: block; width: 44px; height: 44px;} .giuseart-mobile-contact-bar li.hotline { background: url(https://giuseart.com/wp-content/uploads/2020/03/p2.gif); background-repeat: no-repeat; background-size: 44px; } }   </style> <ul class="giuseart-pc-contact-bar"> <li class="facebook"> <a href="https://m.me/joseph.thien.75" target="_blank" rel="nofollow"></a> </li> <li class="zalo"> <a href="https://zalo.me/0972939830" target="_blank" rel="nofollow"></a> </li> </ul>   <ul class="giuseart-mobile-contact-bar"> <li class="facebook"> <a href="https://m.me/joseph.thien.75" target="_blank" rel="nofollow"></a> </li> <li class="zalo"> <a href="https://zalo.me/0972939830" target="_blank" rel="nofollow"></a> </li> <li class="hotline"> <a href="tel:0972939830" target="_blank" rel="nofollow"></a> </li> </ul>

Bước 3: Chỉnh sửa thông tin

Lưu ý: Các vị trí sau bạn có thể sửa theo ý 

Bước 4: Lưu lại và tận hưởng thành quả

Đối với theme bất kỳ không phải Flatsome

Bước 1: Copy code HTML và CSS

Các bạn truy cập Giao diện – Sửa – tìm truy cập vào file Footer.php.  Sau đó, các bạn copy toàn bộ đoạn code ở bước 1 (dành cho theme Flatsome) ở trên và paste vào giữa thẻ đóng </body> và </html>

Bước 3: 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 4: Lưu lại và tận hưởng thành quả

Cuối cùng, các bạn lưu lại và ra trang chủ xem sự thay đổi nha!

Nguồn: https://giuseart.com/huong-dan-tao-cac-nut-lien-he-nhanh-bang-html-va-css/

Chúc các bạn thành công!