Code html đánh giá 5 sao năm 2024
|
Ở các blog thường hiển thị đánh giá của người đọc về một bài viết nào đó, sự đánh giá này được hiển thị tượng trưng bằng các ngôi sao, các check box... Bài viết này hướng dẫn bạn cách tạo phần đánh giá đơn giản bằng CSS. Một số ví dụSố lượng các ngôi sao bị lấp đầy thể hiện mức độ đánh giá của người đọc. Bạn có thể thấy trên ví dụ trên một số ngôi sao chỉ bị lấp 1/2 hoặc 1/4. Ta chỉ sử dụng 2 tấm ảnh sau: Ý tưởngTạo ra 3 thẻ div, trong đó có 1 thẻ cha chứa 2 thẻ con, thẻ cha này sẽ được đặt thuộc tính position:relative, 2 thẻ con còn lại được đặt position:absolute và background là 2 ảnh trên, điều chỉnh sao cho 2 thẻ con này nằm đè lên nhau, cuối cùng chỉ cần thay đổi thuộc tính width của thẻ con nằm trên mang background là ảnh ngôi sao lấp đầy. Plugin Blogger Star Rating mình viết bằng Jquery chỉ đơn giản xếp hạng đánh giá và lưu trữ cục bộ phần đã đánh giá của mỗi người dùng, không hiển thị tổng số bao nhiêu người đã đánh giá và không hiển thị snippets trên kết quả tìm kiếm trên Google Giới thiệu Star rating không đơn giản như nút like chỉ đơn giản là click, ở đây có 2 sự kiện hover và click cụ thể:
Jquery sử dụng lưu trữ cục bộ
Các bước thực hiện + Bước 1: Chèn code hiển thị 5 sao bên dưới bài viết Tìm thẻ
Lưu ý: Thường có vài thẻ + Bước 2: Chèn code script trước thẻ đóng |
