Hôm nay mình sẽ chia sẻ với các bạn đoạn mã Code hiển thị hotline trên worpress đẹp đoạn mã code này các bạn chỉ cần làm theo hướng dẫn của chúng tôi là các bạn sẽ có ngay những nút bấm hotline cực đẹp trên website của mình.
Đoạn mã code này hiển thị trên cả máy tính laptop máy tính bảng và điện thoại. Đoạn mã Code hiển thị hotline này sử dụng được sử dụng rất nhiều trên tất cả các website. Bây giờ mình sẽ hướng dẫn cho các bạn chèn mã Code hiển thị hotline trên worpress đẹp này nhé.
Chức năng của thanh hotline
- Hiển thị cố định ở cạnh trái dưới cùng màn hình máy tính (hoặc dưới cùng màn hình điện thoại).
- Ẩn/hiện mượt mà:
- Khi ở đầu trang hoặc cuối trang: luôn hiện.
- Khi cuộn lên: hiện ra.
- Khi cuộn xuống: ẩn đi.
- Chứa các nút liên hệ nhanh:
- Zalo, Messenger, Gọi điện, SMS, Xem bản đồ, Quay lên đầu trang…
Có thể bạn cũng thích
- Bài viết thu gọn nội dung mô tả sản phẩm này có thể hỗ trợ được công việc bạn đang làm được tối ưu hơn.
- Khoá học quản trị và Seo web lên top google cực nhanh
- Code hiển thị hotline trên website đẹp
- Code tự động lưu ảnh vào hot khi copy hình từ trang khác
- Code hiển thị khuyến mãi đẹp cho flatsome giống như Cellphones
- Dịch vụ quản trị Website chăm sóc website hiệu quả
- Dịch vụ thiết kế Website theo yêu cầu chuẩn SEO, chuyển đổi tốt
Cách chèn mã code hiển thị hotline trên worpress
Bước 1: Đăng nhập website
Bạn cần phải đăng nhập bằng quyền admin cao nhất mới có thể chèn code được vào website của bạn.
Bước 2: Chèn code
Các bạn theo đường dẫn sau để chèn code. Tuỳ theo từng theme mà vị trí chèn khác nhau. Đây là theme Flatsome nên đường dẫn như phần dưới đây.
Flatsome > Advanced > Global Setting > Footer Script
Nếu Theme của bạn không phải là theme Flatsome thì bạn cứ tìm đến mục Footer Script sau đó dán code vào là được nhé.
Đối với các theme khác các bạn có thể chèn như sau.
Chèn đoạn mã sau vào trước thẻ </head> trong file HTML của bạn hoặc vào phần tùy chỉnh CSS của website (với WordPress: Giao diện > Tùy biến > CSS bổ sung):
Bước 3: Hiệu chỉnh thông tin trước khi chèn code.
THAY_BANG_LINK_MAPS: Thay bằng link Google Maps của bạn.https://zalo.me/012345678: Thay số điện thoại Zalo của bạn (chỉ cần đổi số).9tel:: Thay số điện thoại của bạn (để bấm gọi trên điện thoại).0123456789THAY_BANG_LINK_MESSENGER: Thay bằng link Messenger fanpage/cá nhân của bạn.sms:: Thay số điện thoại nhận SMS của bạn.0123456789
Các bạn xem đoạn mã code sau đó copy ra 1 phần mềm nào đó rồi hiệu chỉnh lại thông tin dưới đây sao cho đúng với thông tin của mình.
Các mục code hiển thị hotline cần hiệu chỉnh:
Thay đổi bản đồ chỉ đường và số điện thoại zalo
Thay đổi số điện thoại và tên đường dẫn Mesage FB của bạn
Thay đổi số điện thoại cần nhắn tin
<style>
.phone-mobile {display: none;}
.damthin-nav {
position: fixed;
left: 0;
bottom: 50px;
background: #f3f3f3;
border-top-left-radius: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0px;
width: auto;
z-index: 150;
padding: 15px;
border: 1px solid #f2f2f2;
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, visibility 0.3s;
will-change: transform, opacity, visibility;
opacity: 1;
visibility: visible;
transform: translateX(0) !important;
}
.damthin-nav.hide {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-100%) !important;
}
.damthin-nav.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0) !important;
}
.damthin-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.damthin-nav ul li {
list-style: none !important;
text-align: center;
}
.damthin-nav ul > li a {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
padding: 0;
width: 36px;
height: 36px;
margin: 0 auto;
}
.damthin-nav ul > li a i {
display: inline-block;
width: 36px;
height: 36px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
overflow: hidden;
}
.damthin-nav ul > li a i.ticon-heart {
background-image: url(https://shophocdohoacaptoc48989.zapwp.com/q:i/r:0/wp:0/w:1/u:https://hocdohoacaptoc.com/wp-content/uploads/icon-1.png);
}
.damthin-nav ul > li a i.ticon-zalo-circle2 {
background-image: url(https://shophocdohoacaptoc48989.zapwp.com/q:i/r:0/wp:0/w:1/u:https://hocdohoacaptoc.com/wp-content/uploads/icon-6.png);
}
.damthin-nav ul > li a i.ticon-messenger {
background-image: url(https://shophocdohoacaptoc48989.zapwp.com/q:i/r:0/wp:0/w:1/u:https://hocdohoacaptoc.com/wp-content/uploads/icon-2.png);
}
.damthin-nav ul > li a i.ticon-angle-up {
background-image: url(https://shophocdohoacaptoc48989.zapwp.com/q:i/r:0/wp:0/w:1/u:https://hocdohoacaptoc.com/wp-content/uploads/icon-3.png);
}
.damthin-nav ul > li a i.ticon-chat-sms {
background-image: url(https://shophocdohoacaptoc48989.zapwp.com/q:i/r:0/wp:0/w:1/u:https://hocdohoacaptoc.com/wp-content/uploads/icon-sms.png);
}
.damthin-nav ul > li a i.icon-phone-w {
background-image: url(https://shophocdohoacaptoc48989.zapwp.com/q:i/r:0/wp:0/w:1/u:https://hocdohoacaptoc.com/wp-content/uploads/icon-5.png);
}
.damthin-nav li .button {
background: transparent;
}
.damthin-nav ul li .button .phone_animation i {
width: 36px;
height: 36px;
background-size: 100% 100%;
margin: 0;
}
/* Responsive mobile */
@media only screen and (max-width: 600px) {
.damthin-nav {
left: 0;
bottom: 0;
width: 100%;
height: 70px;
padding: 0;
margin: 0;
border-radius: 0;
background: #fff;
box-shadow: 0 -2px 12px 0 rgba(0,0,0,0.10);
border: none;
display: flex;
align-items: center;
justify-content: center;
color: #333;
line-height: 70px;
/* Hiệu ứng trượt lên/xuống */
transform: translateY(0) !important;
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, visibility 0.3s;
will-change: transform, opacity, visibility;
}
.damthin-nav.hide {
transform: translateY(100%) !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.damthin-nav.show {
transform: translateY(0) !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.damthin-nav ul {
flex-direction: row;
width: 100%;
height: 100%;
justify-content: space-around;
align-items: center;
gap: 0;
}
.damthin-nav li {
width: 20vw;
min-width: 54px;
max-width: 80px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
float: none;
}
.damthin-nav ul > li a {
width: 54px;
height: 54px;
background: #f3f3f3;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
transition: background 0.2s;
}
.damthin-nav ul > li a:active {
background: #e0e0e0;
}
.damthin-nav ul > li a i {
width: 34px;
height: 34px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
display: block;
}
.damthin-nav .phone-mobile {display: block !important;}
.damthin-nav .to-top-pc {display: none !important;}
}
</style>
<div class="damthin-nav show">
<ul>
<li>
<a href="https://hocdohoacaptoc.com/" rel="nofollow" target="_blank">
<i class="ticon-heart"></i>
</a>
</li>
<li>
<a href="https://zalo.me/0822422xxx" rel="nofollow" target="_blank">
<i class="ticon-zalo-circle2"></i>
</a>
</li>
<li class="phone-mobile">
<a href="tel:0123456789" rel="nofollow" class="button">
<span class="phone_animation animation-shadow">
<i class="icon-phone-w" aria-hidden="true"></i>
</span>
</a>
</li>
<li>
<a href="https://m.me/thindv" rel="nofollow" target="_blank">
<i class="ticon-messenger"></i>
</a>
</li>
<li>
<a href="sms:0123456789" class="chat_animation">
<i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
</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 4: Thêm mã JavaScript điều khiển hiệu ứng
Nếu bạn muốn cuộn mượt mà và khi cuộn xuống nó ẩn thì bạn hãy chèn thêm đoạn JS này bạn sẽ có nút hotline trên web của bạn cực kỳ là ưng ý nhé. Chèn đoạn mã sau vào trước thẻ </body> (hoặc vào nơi chấp nhận mã JS tùy nền tảng):
<script>
document.addEventListener('DOMContentLoaded', function () {
var hotlineBox = document.querySelector('.damthin-nav');
var lastScroll = window.scrollY;
function isMobile() {
return window.innerWidth <= 600;
}
function isAtBottom() {
return (window.innerHeight + window.scrollY >= document.body.offsetHeight - 10);
}
function updateHotlineBox() {
var currentScroll = window.scrollY;
if (!hotlineBox) return;
// Chỉ hiệu ứng trượt trên mobile, PC giữ nguyên
if (isMobile()) {
if (currentScroll <= 50 || isAtBottom()) {
hotlineBox.classList.add('show');
hotlineBox.classList.remove('hide');
} else if (currentScroll < lastScroll) {
hotlineBox.classList.add('show');
hotlineBox.classList.remove('hide');
} else {
hotlineBox.classList.add('hide');
hotlineBox.classList.remove('show');
}
} else {
// PC luôn hiện (hoặc bạn có thể dùng hiệu ứng khác)
hotlineBox.classList.add('show');
hotlineBox.classList.remove('hide');
}
lastScroll = currentScroll;
}
updateHotlineBox();
window.addEventListener('scroll', updateHotlineBox);
window.addEventListener('resize', updateHotlineBox);
// Nút lên trên cùng trong thanh hotline
var scrollBtn = document.querySelector('.damthin-nav .to-top-pc a');
if (scrollBtn) {
scrollBtn.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({top: 0, behavior: 'smooth'});
});
}
});
</script>
Lưu ý khi sử dụng và tuỳ biến
- Đổi icon: Nếu muốn đổi icon, hãy thay đổi đường dẫn trong CSS hoặc tự thiết kế icon riêng.
- Thay đổi màu sắc, vị trí: Sửa trực tiếp trong phần CSS (
background,border-radius,left,bottom…). - Thêm/bớt nút: Chỉ cần thêm/xóa các thẻ
<li>trong phần HTML. - Kiểm tra hiển thị trên di động: Đã tối ưu responsive, nhưng bạn có thể chỉnh lại CSS nếu muốn.
- Không cần jQuery, chỉ dùng JavaScript thuần.
Kết quả khi các bạn chèn code hiển thị hotline trên worpress xong
Trên máy tính sẽ như sau
Trên điện thoại sẽ như sau
Lời kết
Chỉ với vài bước đơn giản trên, bạn đã có ngay một thanh hotline liên hệ chuyên nghiệp, hiệu ứng mượt mà cho website. Nếu gặp khó khăn, hãy kiểm tra lại:
- Đã chèn đủ cả 3 phần (CSS, HTML, JS) chưa?
- Đã sửa đúng các link chưa?
- Xem console trình duyệt có báo lỗi không?
Cám ơn đã đọc bài viết. Vừa rồi là toàn bộ hướng dẫn và Code hiển thị hotline trên worpress hi vọng qua bài viết này sẽ giúp được nhiều cho website của các bạn.
Một lần nữa cám ơn các bạn đã theo dõi kênh của chúng tôi trong suốt thời gian qua. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website nhé! Nếu bạn có nhu cầu thiết kế website hoặc học thiết kế đồ họa vui lòng truy cập website học đồ hoạ cấp tốc để biết thêm thông tin chi tiết nhé
