Chia sẻ tiện ích blog và kiến thức xây dựng
Trang chủ
Blogger

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

·
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào đây để chuyển đến liên kết
Chúc mừng! Liên kết được tạo

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

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 &lt;/body&gt;.

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

Chuyển đến liên kết
Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.