Tiện ích 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.

Tôi cũng đã thêm localStorage vào tiện ích này để những người đã xếp hạng không thể xếp hạng lại, nhưng nếu cookie trình duyệt bị xóa, họ có thể xếp hạng lại.

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 bài viết theo thời gian thực trên Blogger và tiện ích like 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 xếp hạng sao trên Blogger

Để 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é.

Preview

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 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>
var sharedBy='www.giahuy.net'; // Credit do not removed
var starRatingSystemSettings={
  'postPage':{
    'firebaseURL':'https://web-giahuy-default-rtdb.firebaseio.com',
    'fullStarImg':'//cdn.giahuy.net/widget/img/star1.png',
    'emptyStarImg':'//cdn.giahuy.net/widget/img/star2.png',
    'hoverStarImg':'//cdn.giahuy.net/widget/img/star1.png',
    'numberOfStars':'5',
    'starSize':'30',
    'textSize':'15',
    'textColor':'#292929',
    'fontFamily':'Arial, Helvetica, sans-serif',
    'align':'center',
    'topText':'Bài viết này có hữu ích không?',
    'bottomText':'Trung bình: $average$ / $max$ ($votes$ votes)',
    'thankYouText':'Cảm ơn bạn đã đánh giá!',
    'blockingText':'Bạn đã votes, đánh giá của bạn là $userRating$.',
 'position':'bottom',
    'status':'active'
  },
  'indexPage':{
    'firebaseURL':'https://web-giahuy-default-rtdb.firebaseio.com',
    'fullStarImg':'//cdn.giahuy.net/widget/img/star1.png',
    'emptyStarImg':'//cdn.giahuy.net/widget/img/star2.png',
    'hoverStarImg':'//cdn.giahuy.net/widget/img/star1.png',
    'numberOfStars':'5',
    'starSize':'30',
    'textSize':'15',
    'textColor':'#292929',
    'fontFamily':'Arial, Helvetica, sans-serif',
    'align':'center',
    'topText':'Bài viết này có hữu ích không?',
    'bottomText':'Trung bình: $average$ / $max$ ($votes$ votes)',
    'thankYouText':'Cảm ơn bạn đã đánh giá!',
    'blockingText':'Bạn đã votes, đánh giá của bạn là $userRating$.',
    'position':'top',
    'status':'readonly'
  },
  'staticPage':{
    'firebaseURL':'https://web-giahuy-default-rtdb.firebaseio.com',
    'fullStarImg':'//cdn.giahuy.net/widget/img/star1.png',
    'emptyStarImg':'//cdn.giahuy.net/widget/img/star2.png',
    'hoverStarImg':'//cdn.giahuy.net/widget/img/star1.png',
    'numberOfStars':'5',
    'starSize':'30',
    'textSize':'15',
    'textColor':'#292929',
    'fontFamily':'Arial, Helvetica, sans-serif',
    'align':'center',
    'topText':'Bài viết này có hữu ích không?',
    'bottomText':'Trung bình: $average$ / $max$ ($votes$ votes)',
    'thankYouText':'Cảm ơn bạn đã đánh giá!',
    'blockingText':'Bạn đã votes, đánh giá của bạn là $userRating$.',
 'position':'bottom',
    'status':'active'
  }
}
</script>
<script src='https://cdn.giahuy.net/widget/js/rating.min.js' async></script>

Chú ý:
Những từ chúng tôi tô màu xanh các bạn thay đổi nội dung cho hợp lý.

Đánh dấu	Thông tin
firebaseURL	Điền url cơ sở dữ liệu thời gian thực hiện firebase của bạn
fullStarImg	Link ảnh hình ngôi sao màu nền
emptyStarImg	Link ảnh hình ngôi sao màu viền
hoverStarImg	Link ảnh hình ngôi sao màu nền
numberOfStars	Số lượng ngôi sao có thể là: 1, 2, 3, 4, 5
starSize	Kích thước ngôi sao hiển thị
textSize	Kích thước chữ hiển thị
textColor	Màu chữ

Bước 6: 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 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