Hướng dẫn tùy chỉnh hiệu ứng làm mờ (Blur) cho Widget thông tin người dùng trên Theme Zibll

Zibll hiện là một trong những giao diện WordPress tối ưu và phổ biến nhất, đặc biệt đối với các blog chia sẻ kiến thức công nghệ. Để giúp giao diện website trở nên tinh tế và có chiều sâu hơn, hôm nay tôi sẽ hướng dẫn các bạn cách thêm hiệu ứng làm mờ (blur) chuyển màu trắng ở phần chân của Widget thông tin người dùng.

Hiệu ứng này không chỉ giúp bố cục trang web trông thanh thoát hơn mà còn tạo điểm nhấn thẩm mỹ chuyên nghiệp cho thanh bên (sidebar).

Hỗ trợ giao diện sáng và tối.

1. Hình ảnh demo

2. Các bước triển khai chi tiết

Việc thiết lập hoàn toàn dựa trên tùy chỉnh CSS, giúp đảm bảo tốc độ tải trang không bị ảnh hưởng. Bạn thực hiện theo các bước sau:

Bước 1: Thiết lập Widget

Truy cập vào giao diện quản trị WordPress > Giao diện (Appearance) > Widget. Tại đây, hãy đảm bảo bạn đã thêm widget (Zibll) Thông tin người dùng vào vị trí mong muốn trên Sidebar.

Bước 2: Thêm mã CSS tùy chỉnh

Các bạn sao chép đoạn mã CSS bên dưới, sau đó truy cập vào Zibll Theme Options > Global & Custom Code > Custom CSS và dán vào khung văn bản:

CSS

.user-cover.graphic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, transparent, #fff);
    pointer-events: none;
}

.dark-theme .user-cover.graphic::after {
    background: linear-gradient(to bottom, transparent, transparent, #323335);
}

3. Một số lưu ý về mặt kỹ thuật

• Độ cao hiệu ứng: Bạn có thể thay đổi giá trị height: 30px để điều chỉnh độ rộng của vùng làm mờ sao cho phù hợp với kích thước widget trên trang của mình.
• Màu sắc hiển thị: Nếu website của bạn sử dụng tông màu chủ đạo riêng biệt, hãy điều chỉnh mã màu #hex trong đoạn code trên để đạt được sự đồng bộ hoàn hảo nhất.
• Làm mới bộ nhớ đệm: Sau khi lưu thay đổi, đừng quên làm mới (clear cache) trình duyệt để kiểm tra kết quả hiển thị cuối cùng.

Hy vọng thủ thuật nhỏ này sẽ giúp giao diện blog của bạn thêm phần ấn tượng. Nếu gặp bất kỳ khó khăn nào trong quá trình cài đặt, xin vui lòng để lại bình luận bên dưới để được hỗ trợ.