Code thanh liên hệ nhanh – Contact Bar

Chào các bạn, lang thang trên group Flatsome Việt Nam, mình tình cờ đọc được câu hỏi của một bạn về thanh liên hệ nhanh (mình tạm gọi là Contact Bar) khá đẹp trên giao diện mobile. Nhận thấy có nhiều bạn cũng chưa biết cách làm nên mình tìm cách làm để chia sẻ cho các bạn, hy vọng nó sẽ hữu ích, mời các bạn theo dõi.

<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>Gi đin</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>Nhn 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>

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!