Đánh giá bài viết hình ngôi sao và lượt xem trang (Ratings widget) với Graddit.com

Tiện ích đánh giá hình ngôi sao được rất nhiều blog/web sử dụng để đánh giá mức độ ưng ý về bài viết của độc giả. Về cơ bản thì tiện ích này tương tự như google+, like facebook, tweeter, tuy nhiên giao diện nhìn đẹp hơn. Vì vậy hôm nay Namkna sẽ chia sẻ với mọi người một cách để tạo tiện ích đánh giá dạng ngôi không chỉ cho cho bài viết trong blogger mà cả phần comment của blog. Ngoài ra, tiện ích này còn thống kê được số lượt xem bài viết trong blogger của bạn và đặc biệt là dễ dàng tùy chỉnh.

Các bạn có thể xem Demo: View Demo

Ảnh minh họa:

Với các mẫu simple của blogger thì tiện ích này được tích hợp sẵn nhưng với nhiều mẫu tùy chỉnh thì tiện ích này bị các designer ẩn đi nên các bạn không thấy. Do vậy mình sẽ hướng dẫn các bạn 2 cách: 1 là từ Graddit.com1, 2 là kích hoạt có sẵn của blogger.

Cài đặt với Graddit.com

1- Truy cập vào trang chủ: http://graddit.com/ratings-widget.
- Chọn kiểu hay dạng ngôi sao mà mình ưng ý.
- Chọn nền tảng (Platform) là Blogger (Nếu chèn vào comment bạn chọn Blogger comments) để lấy code.

- Copy đoạn code thu được để sử dụng cho bước tiếp theo.
2- Chèn vào Blogger

2.1. Đăng nhập vào tài khoản Blogger
2.2. Vào phần Mẫu (Template)
2.3. Chọn chỉnh sửa HTML (Edit HTML) => Tiếp tục (procced) => Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
2.4. Chèn code bên dưới vào sau thẻ <head>

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>

2.5. Tìm đoạn code bên dưới hoặc tương tự:

<div class='post-header-line-1'/>

2.6. Chèn code mà bạn vừa lấy tại Graddit.com ở trên vào ngay dưới code vừa tìm được

2.7. Lưu mẫu lại và kiểm tra kết quả nha.

Kích hoạt đánh giá Rating có sẵn của Blogger

1- Bạn vào phần bố cục (Layout)
2- Chọn Chỉnh sửa (Edit) của phần Bài đăng (Main Post).

3- Bấm chọn vòa ô "Hiển thị xếp hạng theo dấu sao" (Show Star Ratings)
3- Lưu thiết đặt lại.

Cập nhật bổ xung!

Đối với cách này thì đối với những mẫu bạn đã tùy chỉnh, đã loại bỏ các biến Variable có thể không hiện được, chỉ đối với những mẫu sẵn có của blogger kích hoạt sẽ được hiển thị ngay. Để có thể hiện thị được với mẫu bạn đã tùy chỉnh thì sau khi thực hiện xong các bước trên bạn hãy thực hiện thêm các bước sau:

1- Vào Mẫu (Template) >> Chỉnh sửa HTML (Edit HTML) >> Mở rộng mẫu tiện ích (Expand Widget Templates) và tìm đoạn code sau

<data:post.body/>

- Chèn đoạn code sau vào sau code vừa tìm được!

<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if> </div>

2- Tìm code sau:

<b:include name='feedLinks'/>

- Chèn code bên dưới vào sau code vừa tìm được (Nếu chưa có):

<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>

- Lưu mẫu lại.

Theo: Namkna.blogspot.com