Code tạo nút liên hệ nhanh bằng HTML và CSS cho website

Đoạn Code này cực kỳ hữu ích và thích hợp cho cả các bạn đang tìm hiểu về website, đặc biệt là các bạn chưa biết gì về CODE. Bạn chỉ cầm copy và paste theo hướng dẫn dưới là được .

Với theme Flatsome

Bước 1: Truy cập vị trí dán code

Trên thanh đen trên cùng đưa chuột vào chữ Flatsome – Advanced – Global Setting – Footer Script

Bước 2: Cắt dán đoạn code cần thiết

Bạn copy và paste đoạn code dưới đây vào Footer Script nhé:

<style>
.phone-mobile {display: none;}
.nguyencongnam-nav {
    position: fixed;
    left: 13px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    bottom: 50px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
}
.nguyencongnam-nav ul {list-style: none;padding: 0;margin: 0;}
.nguyencongnam-nav ul li {list-style: none!important;}
.nguyencongnam-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;
}
.nguyencongnam-nav ul>li .chat_animation{display:none}
.nguyencongnam-nav ul>li a i.ticon-heart {
    background: url(https://nguyencongnam.id.vn/wp-content/uploads/2023/10/1-1.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.nguyencongnam-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://nguyencongnam.id.vn/wp-content/uploads/2023/10/Thiet-ke-chua-co-ten.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.nguyencongnam-nav li .button {
    background: transparent;
}.nguyencongnam-nav ul>li a i.ticon-angle-up {
    background: url(https://nguyencongnam.id.vn/wp-content/uploads/2023/10/5.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.nguyencongnam-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.nguyencongnam-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.nguyencongnam-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.nguyencongnam-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.nguyencongnam-nav ul>li a i.ticon-messenger {
    background: url(https://nguyencongnam.id.vn/wp-content/uploads/2023/10/3-1.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.nguyencongnam-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.nguyencongnam-nav ul>li a i.ticon-chat-sms {
    background: url(https://nguyencongnam.id.vn/wp-content/uploads/2023/10/Thiet-ke-chua-co-ten-2.png) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
}
.nguyencongnam-nav ul>li a i.icon-phone-w {
    background: url(https://nguyencongnam.id.vn/wp-content/uploads/2023/10/Thiet-ke-chua-co-ten-3.png) no-repeat;
    background-size: contain;}
.nguyencongnam-nav ul li .button .btn_phone_txt {
    position: relative;
}
@media only screen and (max-width: 600px){
.nguyencongnam-nav li .chat_animation{display:block !Important}
 
.nguyencongnam-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;
}
.nguyencongnam-nav ul>li a{padding:0; margin:0 auto}
.nguyencongnam-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;
}
.nguyencongnam-nav li {
    float: left;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="nguyencongnam-nav">
        <ul>
            <li><a href="thay bằng link maps"
            rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
            <li><a href="https://zalo.me/0822422282
" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0822422282
" 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="Thay bằng link mess" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li><a href="sms:0926240041
" class="chat_animation">
            <i class="ticon-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="ticon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
                </a>
            </li>
        </ul>
    </div>

Bước 3: Thay thế, chỉnh sửa thông tin cần thiết

Các bạn có thể tải các ảnh icon về rồi upload lên host, lấy url link ảnh để thay thế vào các link ảnh của mình nha, ví dụ link như này:

Các bạn hãy thay nội dung như: số điện thoại, link maps, link facebook và link chat zalo nhé!

Bước 4: Lưu lại và kiểm tra kết quả

Đối với theme bất kỳ không phải Flatsome

Nếu bạn không dùng Flatsome, chúng ta sẽ bỏ đoạn code này vào giữa hai thẻ đóng </body> và </html> của file Footer.php là được.

Bạn nào mà không biết file Footer.php ở chỗ nào thì vào Quản trị – Giao diện – Sửa giao diện – tìm file Footer.php ở cột bên phải nhé!

Video hướng dẫn chi tiết

Lời kết

Cám ơn các bạn đã quan tâm theo dõi. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website nhé!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *