Trong quá trình tham khảo và phân tích nhiều website có giao diện đẹp, mình đặc biệt ấn tượng với hệ thống nút liên hệ nhanh mà họ sử dụng. Nhận thấy tính ứng dụng rất cao, mình đã chọn lọc những ý tưởng hay nhất và điều chỉnh lại cho phù hợp để chia sẻ với các bạn.
Sau khi hoàn thiện, kết quả mang lại vượt mong đợi. Chỉ với một đoạn code HTML và CSS gọn nhẹ, website trở nên thân thiện hơn, tiện lợi hơn cho người dùng và hỗ trợ tương tác cực kỳ hiệu quả. Đây là một giải pháp đơn giản nhưng đem lại giá trị thực tế rất lớn.
Hình minh họa bên dưới để hình dung rõ hơn cách hoạt động của code nút liên hệ nhanh bằng HTML và CSS – Style 1
Code nút liên hệ nhanh bằng HTML và CSS – Style 1
Code nút liên hệ nhanh bằng HTML và CSS cho website
Bây giờ cùng bắt đầu thực hiện ngay nhé! Đoạn code này cực kỳ thực tế và dễ áp dụng, đặc biệt phù hợp với những bạn mới làm website hoặc chưa từng tiếp xúc với lập trình trước đó.
Bạn không cần kiến thức chuyên sâu về code. Chỉ cần sao chép và dán đúng theo hướng dẫn, mọi thứ sẽ hoạt động trơn tru. Mình đã kiểm tra kỹ nhiều lần, chỉ cần đặt đúng vị trí là hệ thống nút liên hệ sẽ hiển thị ngay lập tức, không cần chỉnh sửa phức tạp hay cấu hình thêm.
Đối với theme Flatsome
Bước 1: Dán code desktop
Bạn đăng nhập vào website, vào Quản trị ==> Flatsome ==> Advanced ==> Global Setting ==> Footer Script copy và paste toàn bộ đoạn code dưới đây vào Footer Script nhé:
<div class="webchuyennghiep247-desktop">
<ul>
<li><a href="https://www.facebook.com/webchuyennghiep247" rel="nofollow" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<div class="line"></div>
<li><a href="https://www.yelp.com/" rel="nofollow" target="_blank"><i class="fab fa-yelp"></i></a></li>
<div class="line"></div>
<li><a href="https://maps.google.com/" rel="nofollow" target="_blank"><i class="fab fa-google"></i></a></li>
<div class="line"></div>
<li><a href="https://www.instagram.com/webchuyennghiep247" rel="nofollow" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
<style>
.line {
border-bottom: 1px solid rgba(255,255,255,0.2);
height: 4px;
width: 33px;
text-align: center;
margin-bottom: 4px;
margin-top: 4px;
}
.webchuyennghiep247-desktop {
position: fixed;
left: 0;
background: #f59421;
width: 55px;
z-index: 150;
top: 30%;
padding: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.webchuyennghiep247-desktop ul {list-style: none;padding: 0;margin: 0;}
.webchuyennghiep247-desktop ul li {list-style: none!important;}
.webchuyennghiep247-desktop ul>li a i {
padding: 8px;
font-size: 14pt;
color: #fff;
display: block;
margin: auto;
}
@media only screen and (max-width: 600px){
.webchuyennghiep247-desktop {
display:none;
}
}
</style>
Bước 2: Dán code mobile
Copy và paste toàn bộ đoạn code dưới đây vào Body Script-Bottom nhé:
<div class="webchuyennghiep247-mobile">
<ul>
<li><a href="https://maps.google.com/" rel="nofollow" ><i class="fa-solid fa-star"></i>Review</a></li>
<li><a href="/services" rel="nofollow" ><i class="fa fa-magic"></i>Services</a></li>
<li><a href="tel:0977246679" rel="nofollow" ><i class="fas fa-phone-alt"></i>Call</a></li>
<li><a href="/Booking" rel="nofollow" ><i class="fa fa-user-plus"></i>Booking</a></li>
<li><a href="https://maps.google.com/" rel="nofollow" target="_blank"><i class="fa fa-location-arrow"></i>Direction</a></li>
</ul>
</div>
<style>
@media only screen and (min-width: 601px){
.webchuyennghiep247-mobile {
display:none;
}
}
.webchuyennghiep247-mobile {
background: #f59421;
width: 100%; border-radius:0;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 3px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.webchuyennghiep247-mobile ul {list-style: none;padding: 0;margin: 0;}
.webchuyennghiep247-mobile ul li {list-style: none!important;}
.webchuyennghiep247-mobile ul>li a {
border:none;
padding: 3px;
display: block;
text-align: center;
font-size: 11px;
line-height: 0px;
color: #ffffff;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.webchuyennghiep247-mobile li {
float: left;
width: 20%;
}
.webchuyennghiep247-mobile ul>li a i {
/* width: 67px; */
height: 33px;
display: block;
margin: auto;
font-size: 16pt;
}
Bước 3: Thay thế, chỉnh sửa thông tin cần thiết
Các bạn hoàn toàn có thể màu sắc thanh liên hệ, các icon tương ứng với link nội dung website mình cần sử dụng nhé
- Icon: các bạn tìm icon trên website: https://fontawesome.com/search
- Nếu thay vào website không hỗ trợ hiển thị cần cài đặt thêm plugin Font Awesome
- Desktop các thông tin cần thay thế: Link facebook, yelp, google, instagram
- Mobile các thông tin cần thay thế: Review, Services, Số điện thoại, Booking, Direction
Bước 4: Lưu lại và hưởng thành quả
Sau khi bạn copy code và sửa thông tin tương ứng với website của bạn, lưu lại và ra trang chủ hưởng thành quả nhé!
Đối với theme bất kỳ không phải Flatsome
Nếu bạn không dùng Flatsome, bạn coppy tất cả code desktop và mobile vào giữa hai thẻ đóng </body> và </html> của file Footer.php nhé!
Còn 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é!
Kết luận
Việc bổ sung các nút liên hệ nhanh cho website không chỉ giúp giao diện trở nên hiện đại hơn mà còn cải thiện đáng kể trải nghiệm người dùng. Chỉ với một đoạn HTML và CSS đơn giản, bạn đã có thể giúp khách truy cập liên hệ nhanh hơn, thuận tiện hơn và tăng khả năng chuyển đổi cho website.
Hy vọng bài viết này sẽ giúp bạn dễ dàng áp dụng và hoàn thiện website của mình theo hướng chuyên nghiệp hơn. Chúc bạn triển khai thành công và xây dựng được một website hiệu quả, thân thiện với người dùng.
