Hướng dẫn tạo đánh giá 5 sao star rating đẹp cho blogspot bằng jquery

Cập nhật ngày 23/07/2024 Bởi Legend Phim

Trong bài viết này yingvn xin giới thiệu plugin blogger tạo xếp hạng 5 sao star rating bên dưới bài viết bằng jquery, cách chèn code và cài đặt hiển thị.

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.

Demo tại : https://theme-yingvn.blogspot.com/

Ok chúng ta bắt đầu tạo đánh giá 5 sao cho bài viết blogspot nhé !

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

<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 3: Chèn code hiển thị 5 sao bên dưới bài viết

<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 4: Cài đặt hiển thị star rating

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

Ok như vậy là chúng ta đã thêm đánh giá 5 sao cho blogspot thành công. Các bạn lưu lại và tận hưởng thành quả nhé :)
Các bạn có thể xem demo tại : https://theme-yingvn.blogspot.com/

Chúc bạn thành công !

Hướng dẫn tạo đánh giá 5 sao star rating đẹp cho blogspot bằng jquery

Hướng dẫn tạo đánh giá 5 sao star rating đẹp cho blogspot bằng jquery

Trong bài viết này yingvn xin giới thiệu plugin blogger tạo xếp hạng 5 sao star rating bên dưới bài viết bằng jquery, cách chèn code và cài đặt hiển thị.

Comments

Post a Comment

Liên quan