Chào các bạn! Nhiều người liên hệ với mình nhờ hướng dẫn cách tạo các nút “Gọi điện”, Chát Zalo” và “Chát Facebook” nên mình tiền chia sẻ với mọi người luôn vài thủ thuật nhỏ để trang trí cho web của mình nha.
Tạo nút gọi điện, chat Zalo và chat Facebook cho website
Mình gửi các bạn link demo để biết chính xác bài viết này chúng ta sẽ làm gì nha, mời tham khảo tại http://tichchu.com/
Và chính xác thì chúng ta sẽ thực hiện việc tạo và chèn các nút gọi điện, chat Zalo và chat Facebook nổi ở góc trái cho website WordPress như hình mô tả dưới đây:
Và bây giờ chúng ta bắt tay làm luôn nhé!
I. Đối với theme Flatsome
Bài viết hướng dẫn được thực hiện trên theme Flatsome. Do đó, các bạn nào sử dụng theme Flatsome thì hoàn toàn có thể làm theo y nguyên nhé!
Bước 1: Copy code HTML và CSS
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é!
<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/039494255">Chát bằng Zalo</a>
</button>
<button class="chat-face">
<a href="http://m.me/duocsihn">Chát bằng Facebook</a>
</button>
<button class="hotline">
<a href="tel:+84394494255">Hotline: 0394.494.255</a>
</button>
</div>
Bước 2: Thay thông tin cần thiết
Thông tin ở đoạn code trên là thông tin mình làm cho trang nuochoacobe.net, 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.
- Nội dung trong khung màu đỏ: Sửa link chat Zalo. Link đúng có dạng: http://zalo.me/03xxxxxxxx (03xxxxxxxx là số điện thoại đăng ký zalo)
- Còn nội dung trong khu màu xanh da trời: Sửa link chat Messenger của bạn
Lưu ý: Màu đỏ: Sửa số điện thoại. Link đúng có dạng: tel:+843xxxxxxxx (+843xxxxxxxx là số điện thoại của bạn)
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é!
II. Đối với theme bất kỳ không phải Flatsome
Bước 1: Copy code HTML và CSS
Các bạn vào Quản trị/Giao diện/sửa giao diện, sau đó chọn theme đang sử dụng cho web, rồi chọn 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ẻ </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 lưu lại và ra trang chủ xem sự thay đổi!
Lời kết
Như vậy là Tích Chu đã hướng dẫn các bạn tạo 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. Cám ơn các bạn đã quan tâm theo dõi và ủng hộ tích chu trong thời gian qua. Chúc các bạn có những phút giây trải nghiệm thú vị trên website.
Nếu bạn không làm được hoặc bị mắc chỗ nào cũng vui lòng comment để chúng cùng nhau tìm hướng giải quyết giúp bạn nhé!
Xin chào! Tôi là Khổng Tích Chu, sinh năm 1972, quê ở Phú Thọ, là giáo viên của 1 trường Cao Đẳng Y Dược. Ngoài công việc chính tôi còn đam mê viết lách chia sẻ. Hy vọng những bài viết về kiến thức sức khoẻ tổng hợp của tôi sẽ giúp ích cho các bạn, hãy góp ý giúp tôi nếu bạn thấy thông tin còn chưa được chính xác. Xin cảm ơn!
Lưu ý: Tích Chu không bán bất kỳ sản phẩm hay dịch vụ gì trên website nhé!
