Tôi hay 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