Hướng dẫn tạo đánh giá bài viết 5 sao (Five Star Ratings) cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Tiện ích đánh giá xếp hạng cho các bài viết dạng 5 sao thì mặc định trong Blogger cũng có hỗ trợ tiện ích này, tuy nhiên nó nhìn không chuyên nghiệp và khó tùy chỉnh hơn. Hôm nay bài viết này sẽ giới thiệu cho các bạn một cách có thể tạo ra tiện ích đánh giá 5 sao một cách chuyên nghiệp với nhiều tùy chỉnh rất hữu ích và tạo nên 1 tiện ích thật đẹp mắt, chuyên nghiệp.

Ở đây mình sẽ hướng dẫn các bạn thêm vào cho các template blogspot, những nền tảng khác các bạn vẫn có thể làm tương tự theo hướng dẫn. Ở đây tiện ích có hỗ trợ ngôn ngữ Tiếng Việt nên rất phù hợp để các bạn đưa vào website hay blog của mình.

Đầu tiên bạn vào rating-widget.com và chọn nền tảng cần tạo (Ở đây mình chọn Blogger)

Tiếp theo bạn tiến hành tùy chỉnh thông tin của tiện ích

- Styles: là phần bạn chọn kiểu đánh giá mà bạn muốn
- Theme & Colors: Bạn chọn giao diện và màu sắc cho tiện ích
- Language & Font: Bạn tùy chọn ngôn ngữ và font chữ phù hợp
- Label: Tùy chỉnh vị trí hiển thị số lượt rating
- Stars: Chọn số lượng ngôi sao hiển thị cho tiện ích
- Custom Text: Bạn có thể tùy chỉnh chữ hiển thị xếp hạng cho từng ngôi sao từ thấp đến cao.

Sau khi đã tùy chỉnh xong bạn có thể click Add to Blogger (Nếu muốn tự động thêm vào cho Blogger của bạn), tuy nhiên ở đây mình hướng dẫn các bạn cách nhúng code bình thường để tránh bị lỗi và bạn sẽ dễ biết cách tùy chỉnh hơn. Bạn chọn Show Source Code và sẽ nhận được code tương tự bên dưới.

<script type="text/javascript">(function(d, t, e, m){
window._rws = window._rws || [{
huid: "414475",
uid: "054ce0ce47cb7b4e1cd6ddaec16d8be0",
source: "blogger",
options: {
"size": "medium",
"style": "oxygen",
"isDummy": false
}
}];


// Append Rating-Widget JavaScript library.
var rw, s = d.getElementsByTagName(e)[0], id = "rw-blogger-js",
p = d.location.protocol, a = ("https:" == p ? "secure." +
m + "js/platform/" : "js." + m + "platform/"),
ck = "Y" + t.getFullYear() + "M" + t.getMonth() + "D" + t.getDate();
if (d.getElementById(id)) return;
rw = d.createElement(e);
rw.id = id; rw.async = true; rw.type = "text/javascript";
rw.src = p + "//" + a + "blogger.js?ck=" + ck;
s.parentNode.insertBefore(rw, s);
}(document, new Date(), "script", "rating-widget.com/"));</script>

Đăng nhập vào Blogger, Chọn Chủ đề và click chỉnh sửa HTML, sau đó copy đoạn code trên dán vào trước thẻ </body>

Tiếp theo bạn tìm đến <div class='post-header-line-1'/> và dán đoạn code bên dưới vào sau đoạn code vừa tìm được. (Ở đây mình chọn đặt tiện ích dưới tiêu đề và trên nội dung, bạn có thể chọn vị trí khác tùy ý).

<div class="rw-ui-container"></div>

Cuối cùng bạn Lưu template lại là xong. Ngoài ra tiện ích có thể tùy biến thêm để đa dạng hơn, bạn có thể tự tìm hiểu thêm hoặc có thắc mắc hãy để lại comment bên dưới để được hỗ trợ và trao đổi thêm nhé.

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

Chuyên mục: Blogspot nâng cao Blogspot tips