Chào các bạn, mấy mẫu web mới nhất của ninhbinhweb.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!
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: //bds6.ninhbinhweb.info
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é!
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é!
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é!
</p> <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"><br><a href="//zalo.me/0867592210" target="_blank" rel="noopener">Chat Zalo</a><br></button><br><button class="chat-face"><br><a href="//m.me/moosun.vn">Chat Facebook</a><br></button><br><button class="hotline"><br><a href="tel:0867592210">Hotline: 0867592210</a><br></button></div><p>
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
<div class=“float-contact”>
<button class=“chat-zalo”>
<a href=“//zalo.me/0867592210”>Chat Zalo</a>
</button>
<button class=“chat-face”>
<a href=“//m.me/moosun.vn”>Chat Facebook</a>
<button class=“hotline”>
<a href=“tel:0867592210”>Hotline: 0867592210</a>
</div>
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:
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é!
Các bạn vào Quản trị – Giao diện – Sửa – Chọn theme đang sử dụng – 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