Hướng dẫn chèn thanh liên hệ tự co giãn cho Website tuyệt đẹp

Chào bạn, nếu bạn đang tìm một mẫu liên hệ nhanh để chèn cho Website thì trong bài này, Liêm xin gửi đến các bạn hướng dẫn cách thêm thanh có nút liên hệ nhanh cho Website WordPress để các bạn làm đẹp Website hơn.

Hướng dẫn tạo nút liên hệ nhanh cho Website WordPress

Trước tiên, để chèn nút liên hệ nhanh cho Website WordPress thì các bạn cần copy đoạn code sau

Bước 1: Copy Code vào đúng chỗ

<div class="contact-nav">
        <ul>
    <li><a rel="nofollow"  href="https://**link website của bạn" class="chat_animation">
            <i class="ticon-chat-sms" aria-hidden="true" title="cart"></i>
                Mua Hàng</a>
            </li>
            <li><a href="http://zalo.me/0906733994 *(sdt zalo của bạn)" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0906733994*(sdt của bạn)" 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://www.youtube.com/channel/UCbNKqozwjZkZUC32D_iRwww *(link kênh ytb của bạn)" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Youtube</a></li>
            <li><a href="https://www.facebook.com/messages/t/liemmktnew/ *(id facebook của bạn)" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li class="to-top-pc">
                <a href="tel:0906733994 *(sdt của bạn)" rel="nofollow">
                    <i class="ticon-angle-up" aria-hidden="true" title="Gọi ngay"></i>Gọi ngay
                </a>
            </li>
        </ul>
    </div>

<style>
.phone-mobile {display: none;}
.contact-nav {
    position: fixed;
    right: 13px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    bottom: 80px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
    box-shadow: 2px 2px 0.2em;
}
.contact-nav ul {list-style: none;padding: 0;margin: 0;}
.contact-nav ul li {list-style: none!important;}
.contact-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;
}
.contact-nav ul>li .chat_animation{display:none}
.contact-nav ul>li a i.ticon-heart {
    background: url(https://liemmkt.com/wp-content/uploads/2020/09/icon-youtube-1.png <- Link hình trên Website của bạn) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.contact-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://liemmkt.com/wp-content/uploads/2020/09/icon-zalo.png <- Link hình trên Website của bạn) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav li .button {
    background: transparent;
}.contact-nav ul>li a i.ticon-angle-up {
    background: url(https://liemmkt.com/wp-content/uploads/2020/09/icon-phone.png <- Link hình trên Website của bạn) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.contact-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.contact-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.contact-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.contact-nav ul>li a i.ticon-messenger {
    background: url(https://liemmkt.com/wp-content/uploads/2020/09/icon-messenger.png <- Link hình trên Website của bạn) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.contact-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.contact-nav ul>li a i.ticon-chat-sms {
    background: url(https://liemmkt.com/wp-content/uploads/2020/09/cart.png <- Link hình trên Website của bạn) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
 border: 1px solid;
border-radius: 50%;

}
.contact-nav ul>li a i.icon-phone-w {
    background: url(https://liemmkt.com/wp-content/uploads/2020/09/icon-phone.png <- Link hình trên Website của bạn) no-repeat;
       background-size: contain;
    width: 38px;
    height: 38px;
    display: block;
}
.contact-nav ul li .button .btn_phone_txt {
    position: relative;
}
@media only screen and (max-width: 600px){
.contact-nav li .chat_animation{display:block !Important}
 
.contact-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;
}
.contact-nav ul>li a{padding:0; margin:0 auto}
.contact-nav {
    background: white;
    width: 100%; border-radius:0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
}
.contact-nav li {
    float: right;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>

Xem demo: hunggoiyen.com

Trên giao diện Flatsome các bạn vào đường dẫn như sau .

Tại trang Flatsome Advanced Options trong tab Global Settings, các bạn copy code bỏ vào phần Footer Scripts như hình dưới.

Nếu bạn dùng giao diện khác mà không phải là Flatsome, thì các bạn hãy bỏ đoạn code này vào giữa hai thẻ đóng </body> và </html> của file Footer.php là được.

Đồng thời, nếu bạn dùng giao diện Flatsome, thì Liêm sẽ hướng dẫn bạn tạo khoảng trắng ở Footer trên giao diện Mobile để khi mà kéo sẽ không bị che mất nội dung phần Footer. Thì các bạn hãy chèn đoạn code sau trong Flatsome > Advanced > Custom CSS  > Mobile Only * .

/*** Absolute Footer Liêm MKT***/
.absolute-footer {    margin-bottom: 50px;
}

Còn bạn không biết file Footer.php ở chỗ nào nữa thì vô Quản trị – Giao diện – Sửa giao diện – tìm file Footer.php ở cột bên phải là được.

Và trên Hosting hoặc FileZilla thì các bạn tìm trong -> Public_html > WP-Content > Themes > *Giao diện của bạn > Tìm trong này nhé.

Xem thêm: Hướng dẫn tắt Gutenberg cho Website WordPress trong 5s

Bước 2: Thay thế, và chỉnh sửa nội dung cần thiết

Các bạn tải file icon liên hệ bên dưới về và giải nén ra xong up lên Website nhé.

Tải bộ icon

Sau khi đã up ảnh lên Website, các bạn copy đường dẫn và thay thế vào doạn code cho phù hợp là được.

Khi đã thay code hình ảnh, tiếp theo các bạn cần thay thế các đường link thành link của Website bạn theo hình dưới.

Sau khi đã hoàn tất các thao tác trên, các bạn lưu lại và ra trang chủ Website tận hưởng thành quả thôi.

Nếu các bạn thấy bài viết này hay, thì đừng quên chia sẻ nó cho mọi người cùng biết và làm theo, để giúp Website trở nên đẹp hơn.

Ngoài ra, đừng quên ghé vào chuyên mục thủ thuật hay cho Website để tìm thêm những bài viết hay để bổ sung thêm kiến thức bạn nhé.

Chỉnh sửa và bổ sung bởi: Liêm MKT

Nguồn bài viết: sưu tầm từ GiuseArt