Bài viết hôm này mình muốn hướng dẫn các bạn code chèn hotline – zalo – facebook Vào Website sao cho đơn giản nhất. Hoặc bạn nào chỉ muốn tích hợp chat vào website cũng được.
Mình code hoàn toàn bằng html/css nên cũng không ảnh hưởng đến tốc độ website đâu nha, nên bạn yên tâm.
4 Mẫu Code Chèn Hotline – Facebook – Zalo Vào Website Phần 2
Bước 1: Các bạn truy cập vào trang quản trị Chọn Giao diện ➱ Sửa giao diện ➱ Tìm file footer.php và chèn đoạn code dưới đây vào trước thẻ </body> nhé.
Note: Nếu như bạn không thấy mục Sửa giao diện thì bạn vào trong file wp-config.php xóa dòng này đi define( ‘DISALLOW_FILE_EDIT’, true ); Nếu bạn không tìm được file ý thì nên nhờ quản trị viên hostting hay vps nhé.
Nếu bạn quan tâm tới việc bảo mật và tối ưu tốc độ cho website thì có thể tìm hiểu thêm ở đây.
Bước 2: Chèn Code Chèn Hotline – Zalo – Facebook Vào Website
<style>
.sharecs-mobile-net-bar{
display:none
}
.sharecs-pc-net-bar{
right: 25px; /** icon hiển thị bên trái - Muốn chuyển sang bên phải sửa right =>left**/
padding: 0px !important;
bottom: 30px;
position: fixed;
z-index: 998;
margin-bottom:0px !important; /** Nếu icon sát đáy quá tăng 0px lên ví dụ 5px **/
}
.sharecs-pc-net-bar li{
width: 44px;
height: 46px;
overflow: hidden;
margin-bottom: 0;
list-style: none;
}
.sharecs-pc-net-bar li.facebook{
margin-bottom: 8px;
background: url(https://sharecs.net/wp-content/uploads/2021/05/code-messger-cho-website-sharecs.net-fb.png);
background-repeat: no-repeat;
}
.sharecs-pc-net-bar li.zalo{
background: url(https://sharecs.net/wp-content/uploads/2021/05/Code-Chen-Hotline-–-Zalo-–-Facebook-Vao-Website-sharecs.net-zl.png);
background-repeat: no-repeat;
}
.sharecs-pc-net-bar li a{
display: block;
width: 44px;
height: 44px;
}
@media only screen and (max-width: 499px) {
.sharecs-pc-net-bar{
display:none
}
.sharecs-mobile-net-bar{
right: 10px; /** icon hiển thị bên trái - Muốn chuyển sang bên phải sửa right => left**/
bottom: 10px;
position: fixed;
z-index: 998;
margin-bottom:0px !important; /** Nếu icon sát đáy quá tăng 0px lên ví dụ 5px **/
display:block !Important
}
.sharecs-mobile-net-bar li{
width: 44px;
height: 46px;
overflow: hidden;
margin-bottom: 0;
list-style:none
}
.sharecs-mobile-net-bar li.facebook{
margin-bottom: 8px;
background: url(https://sharecs.net/wp-content/uploads/2021/05/code-messger-cho-website-sharecs.net-fb.png);
background-repeat: no-repeat;
}
.sharecs-mobile-net-bar li.zalo{
background: url(https://sharecs.net/wp-content/uploads/2021/05/Code-Chen-Hotline-–-Zalo-–-Facebook-Vao-Website-sharecs.net-zl.png);
background-repeat: no-repeat;
}
.sharecs-mobile-net-bar li a{
display: block;
width: 44px;
height: 44px;
}
.sharecs-mobile-net-bar li.hotline {
background: url(https://sharecs.net/wp-content/uploads/2021/05/Code-Chen-Hotline-vao-website-sharecs.net_.gif);
background-repeat: no-repeat;
background-size: 44px;
}
}
</style>
<!-- Hiển thị icon trên Máy Tính -->
<ul class="sharecs-pc-net-bar">
<li class="hotline">
<a href="tel:097000000" target="_blank" rel="nofollow"/>
</li>
<li class="facebook">
<a href="https://www.facebook.com/Sharecs.net/inbox" target="_blank" rel="nofollow"/>
</li>
<li class="zalo">
<a href="https://zalo.me/005869530" target="_blank" rel="nofollow"/>
</li>
</ul>
<!-- Hiển thị icon trên điện thoại -->
<ul class="sharecs-mobile-net-bar">
<li class="facebook">
<a href="https://www.facebook.com/Sharecs.net/inbox" target="_blank" rel="nofollow"/>
</li>
<li class="zalo">
<a href="https://zalo.me/09830000" target="_blank" rel="nofollow"/>
</li>
<li class="hotline">
<a href="tel:097000000" target="_blank" rel="nofollow"/>
</li>
</ul>



Bước 3: bạn thay thế các link ảnh – link zalo, facebook, sdt của bạn vào.



Vậy là thành công rồi đó, bây giờ các bạn quay ra website để xem thành quả mà sharecs và các bạn cùng làm đó nhé nhé!
Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!