Code chèn thanh liên hệ nhanh vào giao diện mobile
Đối với theme Flatsome
Bước 1: Tại thanh Admin Bar đen đen trên cùng, truy cập chữ Flatsome – Advanced – Global Setting– Footer Script
Bước 2: Copy toàn bộ đoạn code dưới đây và paste vào Footer Scipt nhé!
<style>
.bottom-contact{display:none}
@media (max-width: 767px) {
.bottom-contact{display: block;
position: fixed;
bottom: 0;
background: white;
width: 100%;
z-index: 99;
box-shadow: 2px 1px 9px #dedede;
border-top: 1px solid #eaeaea;}
.bottom-contact ul li{width: 25%;
float: left;
list-style: none;
text-align: center; font-size:13.5px;}
.bottom-contact ul li span{color:black}
.bottom-contact ul li img{ width: 35px;
margin-top: 10px;
margin-bottom: 0px;}
}
</style>
<div class="bottom-contact">
<ul>
<li>
<a id="goidien" href="tel:0972939830">
<img src="http://tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-phone2.png"/>
<br>
<span>Gọi điện</span>
</a>
</li>
<li>
<a id="nhantin" href="sms:0972939830">
<img src="http://tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-sms2.png"/>
<br>
<span>Nhắn tin</span>
</a>
</li>
<li>
<a id="chatzalo" href="http://zaloapp.com/qr/p/3ur778onb9ak">
<img src="http://tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-zalo2.png"/>
<br>
<span>Chat zalo</span>
</a>
</li>
<li>
<a id="chatfb" href="https://www.messenger.com/t/joseph.thien.75">
<img src="http://tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-mesenger2.png"/>
<br>
<span>Chat Facebook</span>
</a>
</li>
</ul>
</div>
Lưu ý:
- Sửa số điện thoại của bạn để khách gọi tới trong tel:0972939830
- Sửa số điện thoại của bạn để khách nhắn tin đến trong sms:0972939830
- Sửa link trang zalo cá nhân của bạn để khách nhắn tin tới trong href=”http://zaloapp.com/gr/p/3ur778onb9ak“
- Sửa tên user Facebook của bạn để khách nhắn tin tới trong href=”https://messenger.com/t/joseph.thien.75“
- Các bạn có thể tải các icon trên server của ninhbinhweb.net về, upload lên web của các bạn rồi thay các link ảnh vào đoạn code trên nhé!
Bước 3: Lưu lại và hưởng thành quả trên giao diện mobile.
Đối với theme bất kỳ không phải Flatsome
Bước 1: Truy cập Giao diện – Sửa – chọn theme đang dùng để sửa – Footer.php
Bước 2: Copy toàn bộ đoạn code ở bên trên vào giữa thẻ đóng </body> và </html>
Bước 3: Lưu lại và tận hưởng thành quả trên mobile nhé!
Lời kết
Vậy là các bạn có thể tự làm một thanh liên hệ nhanh trên giao diện mobile của website WordPress rồi phải không? Nếu bạn nào không làm được hoặc gặp sự cố gì, vui lòng comment để anh em trợ giúp nhé!
