Tạo nút liên hệ đẹp, dễ sử dụng cho website WordPress

Tôi ình tham khảo một số website đẹp và thấy họ có mấy nút liên hệ nhanh trông rất xịn, nên mình cóp nhặt ý tưởng về tự làm lại cho website của mình. Kết quả khá ổn, HTML/CSS đơn giản nhưng hiệu quả bất ngờ.

Thêm vào Footer Scripts

Bạn thêm đoạn code sau vào Footer Scripts trong phần Advanced nhé:

<style>
.box_fixRight {
    position: fixed;
    top: 50%;
    right: -110px;
    width: auto;
    transition: all 0.2s ease-in-out 0s;
    z-index: 999;
}
.box_fixRight .box_content {
    background: #fff;
    padding: 10px;
    box-shadow: 10px 0px 30px #888888;
    border-radius: 10px 0 0 10px;
}
.box_fixRight .box_content .item {
    display: block;
    padding: 13px 10px 13px 47px;
    color: #111;
}
.box_fixRight .box_content .item:hover{color:#184b9b}
.box_fixRight .box_content .item.item_1 {
    background: url(/wp-content/uploads/2025/04/fb35x35.webp) no-repeat left;
}
.box_fixRight .box_content .item.item_2 {
    background: url(/wp-content/uploads/2025/04/mess-35x35-1.webp) no-repeat left;
}
.box_fixRight .box_content .item.item_3 {
    background: url(/wp-content/uploads/2025/04/telegram-35x35-1.webp) no-repeat left;
}
.box_fixRight .box_content .item.item_4{
    background: url(/wp-content/uploads/2025/04/zalo-35x35-1.webp) no-repeat left;
}
.box_fixRight:hover {
    right: 0;
    transition: all 0.2s ease-in-out 0s;
}
@media (max-width: 549px){
.box_fixRight{display:none}
}
</style>
<div class="box_fixRight">
<div class="box_content">
<a href="https://www.facebook.com/ng.huu2399/" class="item item_1">Facebook</a>
<a href="https://www.facebook.com/messages/e2ee/t/10041970955820863/" class="item item_2">Messenger</a>
<a href="tel:0352383048" class="item item_3">Telegram</a>
<a href="https://zalo.me/0352383048" class="item item_4">Zalo</a>
</div>
</div>

Lưu ý: Bạn cần thay link liên hệ của bạn vào nhé, icon các nút liên hệ thì bạn có thể tải ở đây:

https://nguyenhuu.info.vn/wp-content/uploads/2025/04/zalo-35×35-1.webp

https://nguyenhuu.info.vn/wp-content/uploads/2025/04/telegram-35×35-1.webp

https://nguyenhuu.info.vn/wp-content/uploads/2025/04/mess-35×35-1.webp

https://nguyenhuu.info.vn/wp-content/uploads/2025/04/fb35x35.webp

Hướng dẫn thêm

Để thêm đoạn code trên vào Footer Script bạn làm theo hướng dẫn. Sau khi đăng nhập vào trang quản trị, bạn chọn Advanced -> Global Settings -> Add code vào Footer Script -> Lưu