Xin chào các bạn, hôm nay mình chia sẻ tới các bạn một đoạn code HTML và CSS đẹp, dùng để tạo các nút liên hệ cho website WordPress. Đoạn code được sưu tầm và chỉnh sửa.
Việc cần làm duy nhất của các bạn là copy đoạn code sau bỏ vào Footer Script của website.
Đối với theme Flatsome
Bạn hãy Copy đoạn code dưới đây:
<div class="nguyencongnam-mess style-for-position-br">
<div class="nguyencongnam-phone">
<a href="tel:0822422282" rel="nofollow" class="nguyencongnam-phone">.</a>
</div>
<div class="nguyencongnam-sms">
<a href="sms:0822422282" rel="nofollow" class="nguyencongnam-sms-event">.</a>
</div>
<div class="nguyencongnam-zalo">
<a href="https://zalo.me/0822422282" target="_blank" rel="nofollow" class="nguyencongnam-zalo-event">.</a>
</div>
<div class="nguyencongnam-messenger">
<a href="https://www.facebook.com/NguyenCongNamDigital" target="_blank" rel="nofollow" class="nguyencongnam-messenger-event">.</a>
</div>
</div>
<style type="text/css">
.nguyencongnam-mess div.nguyencongnam-zalo,
.nguyencongnam-mess div.nguyencongnam-phone {
background-color:#0084ff
}
.nguyencongnam-mess div.nguyencongnam-sms {
background-color:#f60
}
.nguyencongnam-mess div.nguyencongnam-messenger {
background-color:#e60f1e
}
.nguyencongnam-mess {
width:45px
}
.nguyencongnam-mess a {
line-height:45px;
color: transparent;
display:block;
}
.nguyencongnam-mess {
display:block
}
.nguyencongnam-mess div.nguyencongnam-zalo {
display: block
}
.nguyencongnam-mess div.nguyencongnam-phone {
background-image: url(https://nguyencongnam.id.vn/wp-content/uploads/2024/06/icon-call.webp);
}
.nguyencongnam-mess div.nguyencongnam-sms {
background-image: url(https://nguyencongnam.id.vn/wp-content/uploads/2024/06/icon-mail.webp);
background-color: #f60;
background-size: 60%;
}
.nguyencongnam-mess div.nguyencongnam-zalo {
background-image: url(https://nguyencongnam.id.vn/wp-content/uploads/2024/06/icon-zalo.webp);
}
.nguyencongnam-mess div.nguyencongnam-messenger {
background-image: url(https://nguyencongnam.id.vn/wp-content/uploads/2024/06/icon-messenger.webp);
background-color: #f60;
}
.nguyencongnam-mess div {
margin: 14px 0;
background: #0084FF center no-repeat;
background-size: 70%;
border-radius: 50%;
box-shadow: 0 3px 10px #888;
}
.nguyencongnam-mess {
text-align: center;
right:20px;
position: fixed;
bottom: 20px;
z-index: 999;
}
</style>- Nếu là theme Flatsome: Trên thanh đen trên cùng đưa chuột tới Flatsome – Advanced – Global Setting – Footer Script
- Bạn copy và paste đoạn code trên vào ô Footer Script nhé!
Các bạn hãy thay nội dung như: số điện thoại, link facebook và link chat zalo bằng cách thay số và đường link ở các phần gạch chân trắng nhé!
Đố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é!
