Sau đây là code để tạo thanh liên hệ cho website bằng HTML và CSS (có thể xem thử tại đây). Thanh này nguồn gốc là từ anh Thiện Ninh Bình Web (GiuseArt) nhé mọi người. Ai biết sử dụng rồi thì tự thay thế link + nội dung còn ai chưa biết thì có thể liên hệ để mình xử lý giúp.
<style>
.phone-mobile {display: none;}
.maikha-nav {
position: fixed;
right: 13px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.maikha-nav ul {list-style: none;padding: 0;margin: 0;}
.maikha-nav ul li {list-style: none!important;}
.maikha-nav ul>li a {
border:none;
padding: 3px;
display: block;
border-radius: 5px;
text-align: center;
font-size: 10px;
line-height: 15px;
color: #515151;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.maikha-nav ul>li .chat_animation{display:none}
.maikha-nav ul>li a i.icon-maps {
background: url(https://maikha.vn/wp-content/uploads/google-maps.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.maikha-nav ul>li a i.icon-zalo {
background: url(https://maikha.vn/wp-content/uploads/zalo.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.maikha-nav li .button {
background: transparent;
}.maikha-nav ul>li a i.icon-angle-up {
background: url(https://maikha.vn/wp-content/uploads/double-up.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.maikha-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
margin: auto;
}.maikha-nav ul li .button .btn_phone_txt {
position: relative; top:35px;
font-size: 10px;
font-weight: bold;
text-transform: none;
}
.maikha-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}.maikha-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.maikha-nav ul>li a i.icon-messenger {
background: url(https://maikha.vn/wp-content/uploads/facebook-messenger.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.maikha-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}
.maikha-nav ul>li a i.icon-chat-sms {
background: url(https://maikha.vn/wp-content/uploads/sms.png) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.maikha-nav ul>li a i.icon-phone-w {
background: url(https://maikha.vn/wp-content/uploads/phone-call.png) no-repeat;
background-size: contain;}
.maikha-nav ul li .button .btn_phone_txt {
position: relative;
}
@media only screen and (max-width: 600px){
.maikha-nav li .chat_animation{display:block !Important}
.maikha-nav li .button .phone_animation {box-shadow: none;
position: absolute;
top: -16px;
left: 50%;
transform: translate(-50%,0);
width: 50px;
height: 50px;
border-radius: 100%;
background: #6cb917;
line-height: 15px;
border: 2px solid white;
}
.maikha-nav ul>li a{padding:0; margin:0 auto}
.maikha-nav {
background: white;
width: 100%; border-radius:0;
color: #fff;
height: 60px;
line-height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.maikha-nav li {
float: left;
width: 20%;
list-style: none;
height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="maikha-nav">
<ul>
<li><a href="https://goo.gl/maps/MYyQK5Qtk8eU1Ttr8" rel="nofollow" target="_blank"><i class="icon-maps"></i>Tìm đường</a></li>
<li><a href="https://zalo.me/0819529999" rel="nofollow" target="_blank"><i class="icon-zalo"></i>Chat Zalo</a></li>
<li class="phone-mobile"><a href="tel:0819529999" rel="nofollow" class="button"><span class="phone_animation animation-shadow"><i class="icon-phone-w" aria-hidden="true"></i></span><span class="btn_phone_txt">Gọi điện</span></a></li>
<li><a href="https://m.me/maikhatyre/" rel="nofollow" target="_blank"><i class="icon-messenger"></i>Messenger</a></li>
<li><a href="sms:0819529999" class="chat_animation"><i class="icon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>Nhắn tin SMS</a></li>
<li class="to-top-pc"><a href="#" rel="nofollow"><i class="icon-angle-up" aria-hidden="true" title="Quay lên trên"></i></a></li>
</ul>
</div>