Tạo xếp hạng 5 sao star rating bên dưới bài viết bằng jquery

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ể:

1. Khi di chuyển con trỏ chuột vào ngôi sao nào thì ngôi sao đó cùng các ngôi sao trước nó (nếu có) chuyển màu.
2. Khi di chuyển con trỏ chuột khỏi vùng xếp hạng, các ngôi sao sẽ mất màu
3. Khi click vào ngôi sao nào, thì ngôi sao đó cùng các ngôi sao trước nó (nếu có) chuyển màu.

Jquery sử dụng lưu trữ cục bộ

• Nếu bài viết nào người dùng đã click chọn xếp hạng, sẽ lưu trữ vĩnh viễn cho đến khi xóa lịch sử trình duyệt. Ví dụ bài đó họ đánh giá 3 sao, sẽ lưu 3 sao cho đến khi xóa lịch sử, giả sử sau này họ chưa xóa lịch sử mà đánh giá lại 5 sao thì lưu 5 sao cho đến khi xóa lịch sử.
• Lưu trữ xếp hạng của tất cả bài viết người đọc đã đánh giá

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ẻ <data:post.body/> trong widget Blog1, chèn code bên dưới ngay dưới nó

<b:if cond='data:widgets.Blog.first.allBylineItems.reactions and data:view.isPost'>

  <div class="devsite-rating" hover-rating-star="0" selected-rating="0">

    <div class="devsite-rating-caption">Thêm đánh giá</div>

    <div class="devsite-rating-stars" expr:data-id="data:post.id">

      <div aria-label="Site content star ratings, rating 1 out of 5" class="devsite-rating-star" data-rating-val="1" role="button" data-title="Nội dung bình thường"></div><div aria-label="Site content star ratings, rating 2 out of 5" class="devsite-rating-star" data-rating-val="2" role="button" data-title="Nội dung trung bình"></div><div aria-label="Site content star ratings, rating 3 out of 5" class="devsite-rating-star" data-rating-val="3" role="button" data-title="Nội dung chấp nhận được"></div><div aria-label="Site content star ratings, rating 4 out of 5" class="devsite-rating-star" data-rating-val="4" role="button" data-title="Nội dung tốt"></div><div aria-label="Site content star ratings, rating 5 out of 5" class="devsite-rating-star" data-rating-val="5" role="button" data-title="Nội dung tuyệt vời"></div>

    </div>

  </div>

</b:if>

Lưu ý: Thường có vài thẻ <data:post.body/> do đó sau khi chèn nên kiểm tra xem có hiển thị bên dưới bài viết không.

+ Bước 2: Chèn code script trước thẻ đóng </body>

<b:if cond='data:widgets.Blog.first.allBylineItems.reactions and data:view.isPost'>

  <div id="rating-id"></div>

  <script defer="defer" src="https://cdn.jsdelivr.net/gh/vietblogdao/js/blogger-star-rating.min.js"/>

</b:if>

Lưu ý: Theme cần có thư viện jquery

Bước 3: Chèn code css trước thẻ đóng </head>

<b:if cond='data:widgets.Blog.first.allBylineItems.reactions and data:view.isPost'>

<b:tag name='style'>/* <![CDATA[ */

#rating-id{display:none}

.devsite-rating{margin-bottom:20px;text-align:center}

.devsite-rating-caption{font:400 24px/32px Arial,Roboto,sans-serif;margin-bottom:15px}

.devsite-rating-star{display:inline-block;height:24px;width:24px;line-height:26px}

.devsite-rating-star>svg{width:21px;height:21px;stroke-width:2}

.devsite-rating-star:not(.devsite-rating-star-full)>svg{fill:#fff;stroke:#5f6368}

.devsite-rating-star-full>svg{fill:#d56e0c;stroke:#d56e0c}

.devsite-rating-star:hover:after{content:attr(data-title);border-radius:2px;background:rgba(95,99,104,.9);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font:500 12px/12px Arial,Roboto,sans-serif;margin-top:8px;margin-left:-35px;opacity:1;padding:6px 8px;pointer-events:none;position:absolute;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1020}

@media(min-width:769px){.devsite-rating-star{cursor:pointer}}

/* ]]> */</b:tag>

</b:if>

+ Bước 4: Cài đặt hiển thị star rating

Có 2 cách:

- Cách 1: Ngay trong template chuyển đến tiện ích Blog1, mở thẻ <b:widget-settings> tìm thẻ <b:widget-setting name='showReactions'> đặt thành true để hiển thị và thành false nếu muốn tắt hiển thị star rating

- Cách 2: Bên ngoài Bố cục tiện ích chọn chỉnh sửa tiện ích Bài đăng trên Blog, tích chọn ô Phản ứng để hiển thị và bỏ tích nếu muốn tắt hiển thị star rating

Mở rộng nếu muốn hiển thị phần xếp hạng bài viết trên Google tìm kiếm, có thể sử dụng số đếm nhận xét như sau:

Tìm thẻ <data:post.body/> trong widget Blog1, chèn code bên dưới ngay dưới nó

<b:if cond='data:post.allowComments'>

  <div itemprop='' itemscope='' itemtype='http://schema.org/CreativeWorkSeries' style='display:none'>

    <span itemprop='name'><data:post.title/></span>

    <div itemprop='aggregateRating' itemscope='' itemtype='http://schema.org/AggregateRating'>

      <b:if cond='data:post.numberOfComments lte 3'>

        <meta expr:content='data:post.numberOfComments + 3' itemprop='ratingCount'/>

        <meta content='3' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments in [3,4,5]'/>

        <meta expr:content='data:post.numberOfComments + 5' itemprop='ratingCount'/>

        <meta content='3.5' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments in [6,7,8]'/>

        <meta expr:content='data:post.numberOfComments + 8' itemprop='ratingCount'/>

        <meta content='4' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments in [9,10,11]'/>

        <meta expr:content='data:post.numberOfComments + 11' itemprop='ratingCount'/>

        <meta content='4.5' itemprop='ratingValue'/>

        <b:elseif cond='data:post.numberOfComments gt 11'/>

        <meta expr:content='data:post.numberOfComments + 14' itemprop='ratingCount'/>

        <meta content='5' itemprop='ratingValue'/>

      </b:if>

      <meta content='5' itemprop='bestRating'/>

      <meta content='1' itemprop='worstRating'/>

    </div>

  </div>

</b:if>