Woocommerce, Bài Viết, Tất cả bài viết

Hướng Dẫn CSS Đánh Giá Bài Viết WordPress Cực Đẹp

Đăng vào Tháng 2 26, 2025Tháng 2 26, 2025 bởi admin

admin

26/02/2025

5 Phút đọc

47 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Hướng Dẫn CSS Đánh Giá Bài Viết WordPress Cực Đẹp – Bạn đã bao giờ nhìn thấy phần đánh giá sản phẩm trên website của mình và có cảm giác như nó vừa bước ra từ… năm 2005 chưa? Nếu có, thì xin chúc mừng, bạn đã tìm đúng bài viết rồi đấy! Hôm nay, MUATHEMEWPGIARE sẽ giúp bạn hô biến phần đánh giá từ nhàm chán thành lung linh, chuyên nghiệp và cuốn hút hơn bao giờ hết!

form danh gia bai viet san pham

Vì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?

Nếu bạn đang bán hàng online hay viết blog review sản phẩm, phần đánh giá là vũ khí bí mật để tăng uy tín. Một thiết kế đẹp sẽ giúp:

Tăng trải nghiệm người dùng: Khách sẽ thích thú hơn khi để lại đánh giá.
Giữ chân khách hàng: Một form đánh giá xịn xò sẽ khiến khách không ngần ngại chia sẻ cảm nhận.
Hỗ trợ SEO: Đánh giá có thể xuất hiện trên kết quả tìm kiếm, giúp website của bạn nổi bật hơn.

CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu Hậu

Thiết Kế Tổng Thể

Hãy bắt đầu bằng việc nâng cấp diện mạo form đánh giá với nền gradient huyền ảo:

//* Tổng thể form đánh giá 
#review_form_wrapper {
    width: 100%;
    max-width: 100%;
    padding: 40px 10%;
    background: linear-gradient(135deg, #050042, #09006a);
    color: #fff;
    font-family: 'Poppins', sans-serif;
}
//* Nội dung form 
.review-form-inner {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

//* Tổng thể form đánh giá

#review_form_wrapper {

width: 100%;

max-width: 100%;

padding: 40px 10%;

background: linear-gradient(135deg, #050042, #09006a);

color: #fff;

font-family: 'Poppins', sans-serif;

}

//* Nội dung form

.review-form-inner {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

padding: 30px;

border-radius: 15px;

border: 2px solid rgba(255, 255, 255, 0.2);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

transition: all 0.3s ease;

}

Đây là cách giúp form đánh giá nổi bật trên trang sản phẩm mà không làm người dùng “lóa mắt”.

Làm Đẹp Phần Tiêu Đề và đánh giá sao

Tiêu đề cần phải đập vào mắt người dùng ngay lập tức:

.comment-reply-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.comment-reply-title::after {
    content: "";
    width: 80px;
    height: 3px;
    background: #00bfff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
//* Đánh giá sao */
.comment-form-rating label {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.stars {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.stars a {
    font-size: 22px;
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
}

.stars a:hover,
.stars a.active {
    color: #00bfff;
    transform: scale(1.2);
}

.comment-reply-title {

font-size: 24px;

font-weight: bold;

color: #fff;

text-align: center;

text-transform: uppercase;

margin-bottom: 20px;

position: relative;

padding-bottom: 10px;

}

.comment-reply-title::after {

content: "";

width: 80px;

height: 3px;

background: #00bfff;

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

}

//* Đánh giá sao */

.comment-form-rating label {

font-size: 18px;

font-weight: bold;

display: block;

margin-bottom: 10px;

color: #fff;

}

.stars {

display: flex;

justify-content: center;

gap: 10px;

margin-bottom: 15px;

}

.stars a {

font-size: 22px;

color: #888;

text-decoration: none;

transition: all 0.3s ease;

}

.stars a:hover,

.stars a.active {

color: #00bfff;

transform: scale(1.2);

}

Nhờ hiệu ứng hover, mỗi lần rê chuột vào ngôi sao, người dùng sẽ cảm thấy hồi hộp y như bấm nút vote trên show truyền hình!

Nâng Cấp Ô Nhập Nhận Xét

Form nhập bình luận cần phải mềm mại nhưng không yếu đuối.

#comment {
    width: 100%;
    height: 150px;
    padding: 15px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    outline: none;
    transition: all 0.3s ease-in-out;
}
#comment:focus {
    border-color: #00bfff;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

#comment {

width: 100%;

height: 150px;

padding: 15px;

font-size: 16px;

border-radius: 8px;

border: 2px solid rgba(255, 255, 255, 0.3);

background: rgba(255, 255, 255, 0.1);

color: #fff;

outline: none;

transition: all 0.3s ease-in-out;

}

#comment:focus {

border-color: #00bfff;

box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);

}

Khách hàng sẽ cảm giác như đang nhập review trên một website cao cấp chứ không phải một giao diện WordPress lỗi thời.

Biến Nút Gửi Thành “Nút Gọi Hồn”

Một nút gửi đơn giản có thể giết chết trải nghiệm người dùng, hãy làm nó động đậy một chút:

.submit {
    background: linear-gradient(135deg, #00bfff, #008cff);
    color: #fff;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3);
}
.submit:hover {
    background: linear-gradient(135deg, #008cff, #00bfff);
    box-shadow: 0 6px 15px rgba(0, 191, 255, 0.5);
    transform: scale(1.05);
}

.submit {

background: linear-gradient(135deg, #00bfff, #008cff);

color: #fff;

padding: 12px 30px;

font-size: 18px;

font-weight: bold;

border: none;

border-radius: 50px;

cursor: pointer;

transition: all 0.3s ease;

box-shadow: 0 4px 10px rgba(0, 191, 255, 0.3);

}

.submit:hover {

background: linear-gradient(135deg, #008cff, #00bfff);

box-shadow: 0 6px 15px rgba(0, 191, 255, 0.5);

transform: scale(1.05);

}

Với hiệu ứng này, nút gửi không còn là một chiếc khối vuông vô tri, mà trở thành lời mời gọi đầy mê hoặc!

Kết Luận

Chỉ với vài dòng CSS, bạn đã biến phần đánh giá sản phẩm từ một chiếc hộp buồn tẻ thành một góc lung linh như cửa hàng Apple. Còn chờ gì nữa? Thử ngay trên website của bạn và đừng quên theo dõi MUATHEMEWPGIARE để cập nhật thêm nhiều mẹo hay ho khác nhé!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

🎁Nội dung miễn phí có giới hạnBài viết này sẽ miễn phí trong 12 ngày nữa. Sau thời gian này, bạn cần phải mua để...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Sharecode Bộ Công Cụ Tool Đếm Ký Tự Phân Tích SEO Nâng Cao

Bạn đang tìm kiếm một công cụ phân tích nội dung mạnh mẽ, giao diện hiện đại, tích hợp AI và các tính năng SEO...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Flatsome vs Woodmart – Nên Chọn Chủ Đề Nào Cho Website Của Bạn?

Flatsome và Woodmart là hai cái tên nổi bật trong thế giới theme WordPress bán hàng chuyên nghiệp. Nhưng nếu bạn đang bắt đầu xây...
Cách Để Website Hiển Thị Nổi Bật Trên Google

Bạn từng thấy một số website xuất hiện nổi bật trên Google với tiêu đề hấp dẫn, phần mô tả rõ ràng và nhiều liên...
Theme WordPress Giá Rẻ Đáng Tin?

Bạn đang cân nhắc mua một theme WordPress giá rẻ? Có thể bạn đã thấy hàng trăm lời mời gọi như “theme WordPress chuẩn SEO...
Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh...
Plugin Nulled Là Gì? Có Nên Tải Miễn Phí Trên Internet?

Ngày nay, khi xây dựng website bằng WordPress, rất nhiều người tìm đến các plugin bản quyền (premium) để tối ưu hóa tính năng, tăng...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...
Bao Giờ Google Cập Nhật PageRank? Cập Nhật Mới Nhất Về PageRank 2025

Kể từ khi ra đời, PageRank đã trở thành một yếu tố quan trọng trong thuật toán của Google để đánh giá và xếp hạng...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Mục LụcVì Sao Cần Chỉnh Sửa CSS Cho Phần Đánh Giá?CSS Biến Hóa Form Đánh Giá Đẹp Hơn Cả Mẫu HậuThiết Kế Tổng ThểLàm Đẹp...