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é!