Tiện ích Star Rating xếp hạng sao trên Blogger

Xin chào mọi người, nhân dịp này mình sẽ chia sẻ widget bài viết xếp hạng sao cho nền tảng Blogger.

Bạn đang tìm một giải pháp đánh giá bài viết đơn giản, đẹp mắt và ngăn chặn người dùng spam đánh giá nhiều lần? Tiện ích Đánh Giá Sao 1 Lần Duy Nhất là lựa chọn hoàn hảo dành cho bạn!

Một lần nữa, tôi đã tạo tiện ích này bằng cách sử dụng api từ Firebase, trong bài đăng trước tôi đã tạo tiện ích lượt xem bài viết theo thời gian thực trên Blogger và tiện ích Like/Dislike bài viết trên Blogger.

Và tất nhiên điều này có thể xuất hiện trong tất cả các bài viết hoặc thậm chí trên các trang tĩnh, nếu bạn không muốn nó xuất hiện trên các trang tĩnh thì chỉ cần thêm một thẻ có điều kiện.

Tiện ích Star Rating xếp hạng sao trên Blogger

Tính năng nổi bật:

1. Hiển thị đánh giá 5 sao bằng SVG hiện đại, tương thích mọi thiết bị.
2. Lưu trữ dữ liệu qua Firebase Realtime Database cực kỳ nhanh và ổn định.
3. Chỉ cho phép người dùng đánh giá 1 lần duy nhất, kể cả khi:
   • Xoá lịch sử trình duyệt
   • Dùng chế độ ẩn danh
   • F5 hoặc tải lại trang
4. Tự động hiển thị lại số sao người dùng đã chọn sau khi đánh giá.
5. Thông báo “Bạn đã đánh giá rồi” nếu cố đánh lại.
6. Tự căn giữa giao diện sao + điểm trung bình trên cả desktop và mobile.

Để xem demo các bạn hãy bấm vào nút bên dưới nhé, OK, các bạn nào muốn dùng thử thì cùng xem cách thực hiện nhé.

Tạo cơ sở dữ liệu thời gian thực mới

Bạn có thể muốn đọc bài viết này:

• Tiện ích Like/Dislike bài viết trên Blogger
• Tiện ích hộp download đếm số lượt tải bằng Firebase trên Blogger
• Tiện ích lượt xem bài bài viết theo thời gian thực trên Blogger

Hãy thêm quy tắc trong cơ sở dữ liệu thời gian thực Cấu hình Firebase Realtime Database rules như sau:

Nếu bạn chưa biết cách làm hãy đọc bài viết tạo giấy phép với cơ sở dữ liệu thời gian thực Firebase để xem hướng dẫn chi tiết nhé!

{
  "rules": {
    ".read": true,
    "ghRatings": {
      "$blog_id": {
        "$post_id": {
          ".read": true,
          ".write": "newData.hasChildren(['sum', 'count', 'fingerprints']) && newData.child('sum').isNumber() && newData.child('count').isNumber() && newData.child('fingerprints').hasChildren()"
        }
      }
    }
  }
}

Tiện ích xếp hạng sao trên Blogger

Lưu ý: Tiện ích này chỉ dành cho nền tảng Blogger/Blogspot.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> hoặc ]]>*/</style> và dán các mã CSS sau ngay trên vào nó.

/* Star rating by Giahuy.net */
.ghRating-section{display:flex;margin-top:25px;padding-top:25px;width:100%;align-items:center}
.rating-area{width:40%;border-right:1px solid #eee;text-align:center;padding-right:20px}
.average-rating{font-size:18px;font-weight:600;margin-bottom:10px}
#avgScore{font-size:30px;font-weight:700}
#avgScore + small{font-size:18px;font-weight:normal}
.stars-average{display:flex;gap:5px;justify-content:center;margin-top:3px;margin-bottom:3px}
.stars-average svg{width:30px;height:30px;cursor:pointer}
.rating-divided{width:60%;margin-left:30px}
.rating-progress{display:flex;align-items:center;margin:3px 0}
.rating-grade{width:50px;font-size:16px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;position:relative}
.rating-grade::after{content:'';display:inline-block;width:16px;height:16px;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNlMGFjMzMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIC41ODdsMy42NjggNy40MzFMMjQgOS40MjNsLTYgNS44NDkgMS40MTcgOC4yNjhMMTIgMTguODk3IDQuNTgzIDIzLjU0IDYgMTUuMjcyIDAgOS40MjNsOC4zMzItMS40MDV6Ii8+PC9zdmc+");background-size:contain;background-repeat:no-repeat;margin-left:4px;vertical-align:middle}
.progress{background:#e9ecef;width:100%;height:1rem;overflow:hidden;position:relative;margin-right:10px;border-radius:10px}
.progress-bar{background:#e0ac33;height:100%;transition:width 0.6s;border-radius:10px}
.rating-count-detail{font-size:12px;white-space:nowrap;width:80px}
.rating-count-detail .votes{font-weight:bold}
.hidden{display:none!important}
.total-rating,.rated-caption{font-size:16px;margin-top:10px}
@media (max-width:680px){.ghRating-section{flex-direction:column}.rating-area{border-bottom:1px solid #eee;border-right:unset;margin:0 0 15px;padding:0 0 15px;width:100%}.rating-divided{width:100%}}

Bước 6: Sao chép mã HTML bên dưới và đặt nó ở dưới mã: <data:post.body/>. Đối với theme Median UI 1.7 bạn có thể đặt dưới mã <b:include data='post' name='postBody'/>.

<!-- Star Rating by Giahuy.net -->
<div class='ghRating-section'>
  <div class='rating-area'>
    <div class='average-rating'>
      <span id='avgScore'>0.0</span><small>/5</small>
      <div class='stars-average' id='starsAverage'>
      </div>
    </div>
    <div class='total-rating'><span class='total'>0</span> ratings</div>
    <div class='rated-caption hidden'><p>Thank you for your rating!</p></div>
  </div>
  <div class='rating-divided'>
    <div class='rating-progress' data-rate='5' data-text='0'>
      <span class='rating-grade'>5</span>
      <div class='progress'><div class='progress-bar'></div></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='4' data-text='0'>
      <span class='rating-grade'>4</span>
      <div class='progress'><div class='progress-bar'></div></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='3' data-text='0'>
      <span class='rating-grade'>3</span>
      <div class='progress'><div class='progress-bar'></div></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='2' data-text='0'>
      <span class='rating-grade'>2</span>
      <div class='progress'><div class='progress-bar'></div></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
    <div class='rating-progress' data-rate='1' data-text='0'>
      <span class='rating-grade'>1</span>
      <div class='progress'><div class='progress-bar'></div></div>
      <span class='rating-count-detail'><span class='votes'>0</span> votes</span>
    </div>
  </div>
</div>

Bước 7: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp </body>.

<script>
/*<![CDATA[*/
var ghRatings = {
  firebaseUrl: 'https://giahuy-default-rtdb.firebaseio.com/',
  sharedBy: 'www.giahuy.net' // Credit do not removed
};

function ratingLoad(){var script=document.createElement('script');script.async=true;script.src='https://cdn.giahuy.net/widget/js/star-ratings.min.js';document.body.appendChild(script)}(function(){if(localStorage.getItem("RatingsJs")!=="true"){let t=false;window.addEventListener("scroll",()=>{if(!t){ratingLoad();localStorage.setItem("RatingsJs","true");t=true}},true);window.addEventListener("click",()=>{if(!t){ratingLoad();localStorage.setItem("RatingsJs","true");t=true}},true)}else ratingLoad()})();
/*]]>*/
</script>

Ghi chú:
firebaseUrl: Điền URL cơ sở dữ liệu thời gian thực firebase của bạn.

Bước 8: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Trên đây là hướng dẫn tiện ích Star Rating xếp hạng sao trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Related Posts