Các website bán hàng, dịch vụ hiện nay, thường có những nút liên hệ(Call To Action) qua điện thoại, nút zalo, facebook mesenger để thu hút khách hàng liên hệ. Có khá nhiều cách để làm các nút này. Bạn có thể thể sử dụng các plugin miễn phí như call Now, Quick Call Button, Call Now Icon Animate hoặc bạn có thể tham khảo plugin trả phí All in One Support Button, callback Request. Hôm nay Việt Share sẽ giới thiệu các bạn một đoạn code html và css này mà không cần tới plugin nên tốc độ tải trang sẽ khá nhẹ hợn sử dụng plugin
Hiển thị trên máy tính
Trên điện thoại
Code nhúng vào web:
html:
<div class="bottom-contact"> <ul> <li> <a id="goidien" href="tel:0902494761"> <img src="http://cutram.org/wp-content/uploads/2020/01/goidien.png" alt="gọi điện thoại báo giá cừ tràm hiện nay 24/24"/> <br> <span>Gọi điện</span> </a> </li> <li> <a id="nhantin" href="sms:0902494761"> <img src="http://cutram.org/wp-content/uploads/2020/01/tinnhan.png" alt="nhắn tin mua cừ tràm, cừ bạch đàn giá rẻ"/> <br> <span>Nhắn tin</span> </a> </li> <li> <a id="chatzalo" href="http://zalo.me/0902494761"> <img src="http://cutram.org/wp-content/uploads/2020/01/zalo-chat-1.png" alt="chát zalo mua bán cừ tràm giá rẻ tphcm"/> <br> <span>Chat zalo</span> </a> </li> <li> <a id="chatfb" href="https://www.messenger.com/t/cutramtienthanh"> <img src="http://cutram.org/wp-content/uploads/2020/01/Facebook_Messenger.png" alt="chát facebok mu báo giá cừ tràm và thi công đóng cừ tràm"/> <br> <span>Chat Fb</span> </a> </li> </ul> </div> <div class="float-contact"> <button class="chat-zalo"><a href="http://zalo.me/0902494761">Chat Zalo</a></button> <button class="chat-face"><a href="http://m.me/cutramtienthanh">Chat Facebook</a></button> <button class="hotline"><a href="tel:0961735081">Hotline: 0961 735 081</a></button> </div>
CSS
<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 #0000008a;
border-top: 1px solid #eaeaea;}
.bottom-contact ul li{width: 25%; margin-bottom:0;
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: 3px;
margin-bottom: 0px;}
.float-contact{display:none}
}
.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0px 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0px 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: normal;
text-transform: none;
line-height: 0;
}
bạn chỉ việc thay đổi các số điện thoại là xong còn một cách đơn giản hon là bạn nhúng tất cả đoạn code trên đây vào widget của wordpress là xong
<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 #0000008a;
border-top: 1px solid #eaeaea;}
.bottom-contact ul li{width: 25%; margin-bottom:0;
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: 3px;
margin-bottom: 0px;}
.float-contact{display:none}
}
.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0px 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0px 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: normal;
text-transform: none;
line-height: 0;
}
</style>
<div class="bottom-contact">
<ul>
<li>
<a id="goidien" href="tel:0902494761">
<img src="http://cutram.org/wp-content/uploads/2020/01/goidien.png" alt="gọi điện thoại báo giá cừ tràm hiện nay 24/24"/>
<br>
<span>Gọi điện</span>
</a>
</li>
<li>
<a id="nhantin" href="sms:0902494761">
<img src="http://cutram.org/wp-content/uploads/2020/01/tinnhan.png" alt="nhắn tin mua cừ tràm, cừ bạch đàn giá rẻ"/>
<br>
<span>Nhắn tin</span>
</a>
</li>
<li>
<a id="chatzalo" href="http://zalo.me/0902494761">
<img src="http://cutram.org/wp-content/uploads/2020/01/zalo-chat-1.png" alt="chát zalo mua bán cừ tràm giá rẻ tphcm"/>
<br>
<span>Chat zalo</span>
</a>
</li>
<li>
<a id="chatfb" href="https://www.messenger.com/t/cutramtienthanh">
<img src="http://cutram.org/wp-content/uploads/2020/01/Facebook_Messenger.png" alt="chát facebok mu báo giá cừ tràm và thi công đóng cừ tràm"/>
<br>
<span>Chat Fb</span>
</a>
</li>
</ul>
</div>
<div class="float-contact">
<button class="chat-zalo"><a href="http://zalo.me/0902494761">Chat Zalo</a></button>
<button class="chat-face"><a href="http://m.me/cutramtienthanh">Chat Facebook</a></button>
<button class="hotline"><a href="tel:0961735081">Hotline: 0961 735 081</a></button>
</div>
Do thời gian gần đây mình bận ty khi mình rảnh mình sẽ làm video hướng dẫn chi tiết hơn hoặc các bạn gọi vào 0932 286 456 mình sẽ hỗ trợ miễn phí
Sao mình làm không được thế?
cbạn cho mình email để hỗ trợ
đươc mà bạn
cài hoài không đc