Chia sẽ code liên hệ giao diện mobile đẹp

Mẹo nhỏ: Để tìm kiếm chính xác các bài viết và sản phẩm của Tiencuong.info, hãy search trên Google với cú pháp: "Từ khóa" + "tiencuong". (Ví dụ: website bán hàng tiencuong). Tìm kiếm ngay

Hướng dẫn chèn code HTML và CSS vào website để có thanh menu nằm ngang dưới chân trang mobile gồm các nút gọi điện, nhắn tin SMS, nhắn tin Zalo và chat Facebook Messenger. Code rất dễ thực hiện trên các theme builder như Flatsome, Betheme, Enfold,.. với các theme WordPress thông thường cũng chỉ cần một vài thao tác là OK.

Tiencuong-wordpress-code-lien-het-giao-dien-mobile

Hướng dẫn sử dụng:

  1. Thay thế số điện thoại, số nhắn tin SMS, link Zalo, link Messenger của bạn
  2. Tải các icon về hosting và thay thế đường link icon cho chính xác. Bạn có thể tải icon trên internet rồi định dạng icon cho phù hợp với kích thước hiển thị.
  3. Nhúng đoạn code vào trước thẻ đóng </body> và </html> của file footer.php hoặc copy code vào ô nhập Footer Script của theme Flatsome, Betheme,..
</pre>
<div>
<div><section id="azt-contact-footer-outer"></div>
<div>    <div id="azt-contact-footer"></div>
<div>        <a href="#" data-open="#main-menu" data-pos="left" data-bg="main-menu-overlay"><i class="fas fa-bars"</div>
<div>                aria-hidden="true" style="height: 25px;"></i><span</div>
<div>                class="azt-contact-footer-btn-label"><span>Menu</span></span></a></div>
<div>        <a href="#"></div>
<div>            <span></div>
<div>                <img src="https://tiencuong.info/wp-content/uploads/2023/05/gui-yeu-cau-icon.png" alt="Gửi</div>
<div>                    yêu cầu"></div>
<div>                <span class="azt-contact-footer-btn-label">Gửi yêu cầu</span></div>
<div>            </span></div>
<div>        </a></div>
<div>        <a id="azt-contact-footer-btn-center" href="tel:099999999″></div>
<div>            <span class="azt-contact-footer-btn-center-icon"></div>
<div>                <span class="phone-vr-circle-fill"></span></div>
<div>                <img src="https://tiencuong.info/wp-content/uploads/2023/05/phone-call.png" alt="Gọi ngay"></div>
<div>            </span></div>
<div>            <span></div>
<div>                <img src="https://tiencuong.info/wp-content/uploads/2023/05/phone-call.png" alt="Gọi ngay"</div>
<div>                    style="visibility: hidden"></div>
<div>                <span class="azt-contact-footer-btn-label"></div>
<div>                    <span>Gọi ngay</span></div>
<div>                </span></div>
<div>            </span></div>
<div>        </a></div>
<div>        <a href="https://facebook.com/dev.tiencuong" target="_blank"></div>
<div>            <span></div>
<div>                <img src="https://tiencuong.info/wp-content/uploads/2023/05/messenger-icon.png"</div>
<div>                    alt="Messenger"></div>
<div>                <span class="azt-contact-footer-btn-label">Messenger</span></div>
<div>            </span></div>
<div>        </a></div>
<div>        <a href="https://zalo.me/0877433585″ target="_blank"></div>
<div>            <span></div>
<div>                <img src="https://tiencuong.info/wp-content/uploads/2024/01/zalo-150×150-1.png" alt="Zalo"></div>
<div>                <span class="azt-contact-footer-btn-label">Zalo</span></div>
<div>            </span></div>
<div>        </a></div>
<div>    </div></div>
<div></section></div>
</div>
<pre>
#azt-contact-footer-outer {position: fixed;width: 100%;z-index: 100 !important;bottom: 0;display: none;}#azt-contact-footer {display: flex;max-width: 1200px;margin: auto;position: relative;padding-top: 5px;}#azt-contact-footer:after {content: ”;position: absolute;pointer-events: none;background-image: url(/wp-content/uploads/2023/05/mb-footer-bg.svg);background-color: unset;background-position: center top;background-repeat: no-repeat;background-size: 100%;box-shadow: unset;height: 65px;width: 100%;margin-left: 0;margin-bottom: 0;left: 0;bottom: 0;z-index: -1;}#azt-contact-footer > a {position: relative;display: block;width: 25%;text-align: center;padding: 5px 0 0px 0;color: #313131;}#azt-contact-footer > span {display: block;width: 30px;}#azt-contact-footer span {display: block;}.azt-contact-footer-btn-label {padding: 0px 2px 0 2px;font-size: 11px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;}#azt-contact-footer > a img {height: 30px}#azt-contact-footer-btn-center {position: relative;background: transparent !important;}#azt-contact-footer-btn-center .azt-contact-footer-btn-label {position: absolute;left: 50%;bottom: 2px;transform: translateX(-50%);}#azt-contact-footer-btn-center .azt-contact-footer-btn-label > span {padding: 0px 8px;background-image: linear-gradient(92.83deg, #0E68C8 0, #02A4A5 100%);border-radius: 30px;color: white;display: inline-block;}.azt-contact-footer-btn-center-icon {left: 50%;position: absolute;transform: translateX(-50%);background-image: linear-gradient(92.83deg, #0E68C8 0, #02A4A5 100%);width: 50px;height: 50px;border-radius: 50%;top: -28px;text-align: center;box-shadow: rgb(0 0 0 / 15%) 0 -3px 10px 0px;border: 2px solid #ffffff7d;}.azt-contact-footer-btn-center-icon img{max-width: 20px;height: auto !important;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.phone-vr-circle-fill {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;box-shadow: 0 0 0 0 #0E68C8;border: 2px solid transparent;transition: all .5s;animation: zoom 1.3s infinite;}@keyframes zoom {0% {}70% {box-shadow: 0 0 0 15px transparent}100% {box-shadow: 0 0 0 0 transparent}}
@media only screen and (max-width: 850px) {
#azt-contact-footer-outer {
display:block;
}
}
<style>

Lưu ý: Nên thay lại sđt zalo và link hình ảnh cho phù hợp với nhu cầu của các bạn !
Chúc các bạn thành công.

Chia sẻ bài viết:

Thông báo chính thức: Tiến Cường chấm Info (thuộc Tiến Cường Wordpress) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận