"Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com"

Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com
Traidatmui.com – Trước đây để có tiện ích đánh giá bài viết dạng ngôi sao thì các Blogger hay sử dụng đến js-kit-rating (http://js-kit.com/ratings.js) với 5 ngôi sao đánh giá. Tuy nhiên thời gian gấn đây file http://js-kit.com/ratings.js không còn hoạt động nữa dẫn đến tiện ích các blogger chèn vào blog mình bị die theo. Chính vì thế hôm nay mình xin chia sẻ cùng các bạn 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. Hơn nữa, với tiện ích này bạn còn có thể biết được số lượt xem bài viết (view) trong blogger của bạn và dễ dàng tùy chỉnh.

Hình ảnh minh họa
Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com

Thật ra tiện ích này cũng đã được Blogger tích hợp sẵn trong Template, mình sẽ chia sẻ luôn cách kích hoạt tiện ích này để các bạn chọn tiện ích phù hợp cho blog mình.

A. Thực hiện với Graddit.com

Đầu tiên bạn hãy vào Graddit.com và chọn kiểu hay dạng ngôi sao mà mình ưng ý, sau đó 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.

Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com

Đến bước chèn vào Blogger

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. 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"/>
6. Tìm đến đoạn code bên dưới hoặc tương tự
<div class='post-header-line-1'/>
7. 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 (ví dụ code có dạng)
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&quot;&#9734;&quot;,&quot;&#9733;&quot;]]}</div>
<div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='&quot;http://graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;views=yes&amp;average=yes&amp;votes=yes&quot;'></script></b:if>
8. Cuối cùng bạn save lại là xong

B. Kích hoạt tiện ích Rating của Blogger

Đầu tiên bạn vào địa chỉ http://draft.blogger.com và đăng nhập bằng tài khoản Blogger của mình.

Tiếp theo bạn vào phần bố cục (Layout) chọn Chỉnh sửa (Edit) của phần Post

Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com

Tiếp theo bạn Check "Hiển thị xếp hạng theo dấu sao" (Show Star Ratings)

Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com

Cuối cùng save lại là xong

Lưu ý: Đố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:

Vào Template (Mẫu) >> Edit HTML (Chỉnh sửa HTML) >> Expand Widget Templates (Mở rộng mẫu tiện ích) và tìm đến code sau
<data:post.body/>
Chèn thêm code bên dưới vào ngay bên dưới 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>
Tiếp đến bạn tìm code sau:
<b:include name='feedLinks'/>
Chèn thêm code (Màu xanh lá) bên dưới vào sau code vừa tìm được (Nếu chưa có), code sau khi thêm sẽ có dạng như bên dưới.
<b:include name='feedLinks'/>
<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>
</b:includable>

Cuối cùng save lại

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

Xem khác cùng chủ đề

9 nhận xét | Viết lời bình

11/15/2012 10:03:00 SA Trả lời

Cho blogger comments là sao nhỉ? mình chèn phần đấy lại không thấy hiện
có phải đánh giá bình luận blog không :)

Admin
11/15/2012 07:18:00 CH Trả lời

Blogger comments: là code để bạn chèn vào phần comment, tiện ích để đánh giá cho từng comment bạn ah.

11/16/2012 12:44:00 SA Trả lời

Vậy chèn cái code mình lấy cho phần comments thì vẫn chèn dưới thẻ
div class='post-header-line-1'
hay chèn vào phần nào idontknow

Admin
11/16/2012 12:53:00 SA Trả lời

Cái đấy là code comment nên phải chèn vào phần comment chứ bạn, vị trí thì tùy bạn muốn đặt ở nơi nào trong comment. Có thể đặt trong
[code] <div class='comment_body'>[/code]
Hoặc bất kỳ vị trí nào trong comment mà bạn muốn.

11/16/2012 02:01:00 SA Trả lời

thanks :)

7/23/2014 06:02:00 CH Trả lời

Chào bạn ! Mình đã thực hiện theo bài hướng dẫn của bạn, mặc dù là mẫu tùy chỉnh và mình cũng không cần phải chèn 2 đoạn code bên dưới nhưng tiện ích hiển thị rất tốt. Có điều số lượt view lại hiển thị không đúng. Bài được blogger tổng hợp trong mục Tổng quan là 15 mà trên tiện ích Graddit chỉ hiển thị có 2 view (bài mình đăng sau khi đã chèn tiện ích). Thậm chí cũng không thấy nó tăng lên nữa. Bạn có cách nào khắc phục lỗi này không, chỉ giúp mình với.

Admin
7/24/2014 07:17:00 SA Trả lời

Tiện ích này mình sử dụng thông qua trang thứ 3 là graddit.com nên hệ thống đếm là mình không thể can thiệp được bạn ah. Mình thấy hệ thống đếm của graddit.com khá chính xác, còn lệch so với Blogger thì bạn nên xem lượt view trong phần mỗi bài viết thì chính xác hơn, bạn để ý thử xem sao nhé.

7/24/2014 06:24:00 CH Trả lời

Mình nghĩ chắc nó cập nhật sai bạn à. Vì mình thấy số lượt view trong các bài viết trên blogger cao hơn nhiều. Có thể blogger tính cả lượt view của tác giả, nhưng lượt xem của mình chắc không đáng kể. Có bài lượt like là 5 chứng tỏ có ít nhất 5 người đã vào xem, nhưng hiển thị lượt view trên tiện ích chỉ là 0. VD : Bài này . Mình thấy tiện ích này hiển thị rất đẹp, tiếc là chưa chuẩn, bạn có tiện ích nào khác để xem lượt bài đăng hiệu quả hơn không, giới thiệu cho mình với. Thanks bạn !

12/23/2014 02:49:00 SA Trả lời

Cảm ơn bài viết rất hay mình cũng rất cần cảm ơn Ad nhé.
Mình đang seo từ khóa " Đất nền Bình Dương, dat nen binh duong" nên chưa biết làm thể nào ? Pro nào rảnh ghé thăm Blog: http://www.datnenvietsingbinhduong.blogspot.com hướng dẫn và chia sẻ mình với nhé.
Trân trọng cảm ơn!

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang