Thêm nút social cố định với hiệu ứng đẹp mắt

Bởi WP Việt 28/09/2022 WordPress căn bản 0 bình luận

Bạn đang muốn thêm các nút gọi điện, chat hoặc mạng xã hội cố định trên website để người dùng dễ dàng liên hệ với bạn. Các nút này rất cần thiết đối với mỗi website. Và trong bài viết này, mình sẽ hướng dẫn bạn thêm các nút tuỳ thích đặt cố định ở góc màn hình và có hiệu ứng bắt mắt: icon với khung vuông sẽ xoay chuyển thành hình tròn khi đưa chuột vào.

Cách làm này của mình sẽ sử dụng code html và css nên bạn có thể chèn vào trang web wordpress hoặc bất kỳ website nào khác một cách dễ dàng mà không sợ làm nặng trang. Ngoài ra, mình sử dụng các icon từ fontawesome hoặc bạn có thể dùng file svg để làm icon cũng được. OK, vào việc nhé!

Thêm nút social cố định với hiệu ứng đẹp mắt

Đầu tiên, nếu muốn dùng icon fontawesome, bạn phải chèn bộ font này vào trang web của bạn bằng cách dán đoạn code sau vào trong thẻ <header></header> đầu trang.

<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet” type=”text/css”>

Đối với WordPress, bạn có thể mở menu Giao diện > Chỉnh sửa giao diện và chọn sửa file header.php của theme đang dùng nhé. Sau đó lưu file này lại.

Tiếp theo, bạn mở file style.css lên và dán đoạn code sau vào:

section #services {
text-align: center;
transform: translatez(0);
z-index: 9999;
position: fixed;
bottom: 1px;
right: 65px;
}

section #services li {
width: 40px;
height: 40px;
display: inline-block;
margin: 5px;
list-style: none;
}

section #services li div {
width: 40px;
height: 40px;
font-size: 1.5em;
text-align: center;
line-height: 40px;
transition: all 0.5s ease;
border: 2px solid #fff; /* thay đổi màu sắc các nút tại đây */
}

section #services li a {
color: #fff; /* thay đổi màu sắc icon tại đây */
}

section #services li div:hover {
transform: rotate(360deg);
border-radius: 100px;
}

Bạn có thể thay đổi màu sắc của các nút theo các đoạn lưu ý bên trong đoạn code nhé. Lưu file này lại.

Bây giờ, mình sẽ chèn các nút vào trong file footer.php bằng đoạn code sau:

<section>
<ul id=”services”>

<li>
<div class=”facebook”>
<a href=”https://www.facebook.com/” target=”_blank” rel=”noopener”>
<i class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
</div>
</li>
<li>
<div class=”instagram”>
<a href=”https://www.linkedin.com/” target=”_blank” rel=”noopener”>
<i class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
</div>
</li>
<li>
<div class=”twitter”>
<a href=”https://twitter.com/antesco_jsc” target=”_blank” rel=”noopener”>
<i class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
</div>
</li>
<li>
<div class=”youtube”>
<a href=”https://www.youtube.com/” target=”_blank” rel=”noopener”>
<i class=”fa fa-play” aria-hidden=”true”></i>
</a>
</div>
</li>
<li>
<div class=”whatsapp”>
<a href=”https://web.whatsapp.com/send?phone=0899389808″ target=”_blank” rel=”noopener”>
<i class=”fa fa-whatsapp” aria-hidden=”true”></i>
</a>
</div>
</li>
<li>
<div class=”viber”>
<a href=”https://web.whatsapp.com/send?phone=0899389808″ target=”_blank” rel=”noopener”>
<i class=”fa fa-phone-volume” aria-hidden=”true”></i>
</a>
</div>
</li>
</ul>
</section>

Bạn có thể thêm hoặc thay đổi các nút theo ý mình bằng cách chỉnh sửa hoặc thêm đoạn code này ở trên:

<li>
<div class=”viber”>
<a href=”https://web.whatsapp.com/send?phone=0899389808″ target=”_blank” rel=”noopener”>
<i class=”fa fa-phone-volume” aria-hidden=”true”></i>
</a>
</div>
</li>

Đồng thời nhớ thay đổi đường dẫn trong thẻ <a> cho đúng nhé.

Ngoài ra, thẻ <i> bên dưới để khai báo các icon, bạn thay đổi cho phù hợp bằng cách vào trang https://fontawesome.com/icons để lấy các icon bạn muốn.

<i class=”fa fa-phone-volume” aria-hidden=”true”></i>

OK như vậy là xong, và đây là kết quả: