[Blogspot] - Hướng dẫn thêm đánh giá 5 sao, lượt xem cho blogspot

Bạn đã biết về Reaction widget hay chính là phản ứng người dùng? Bạn đã thấy nó nhiều trên các website cũng như blog khi ghé thăm? Để có tiện ích này không khó chút nào, bài viết hôm nay thiet ke website ha noi sẽ hướng dẫn cho các bạn cách chèn tiện ích Star rating cho Blog của các bạn nhé!

danh-gia-5-sao-cho-blogspot

Widget này để theo dõi phản ứng của người dùng về bài viết trên trang web, blog... Người đọc cũng dễ dàng chỉ định bài viết đó có hay hoặc hữu ích hay không, đồng thời nó cũng giúp bạn theo dõi những bài viết nào được mọi người ưa chuộng và không. Hầu hết những blogger đều sử dụng Reactions widget mặc định, với tiện ích này sẽ chuyên nghiệp và dễ quản lý hơn rất nhiều.
Cùng bắt tay vào làm nhé!
Các bước thực hiện như sau:

Bước 1. Đăng nhập vào Blog – > Mẫu (Thiết kế) -> Chỉnh sửa HTML( Edit HTML)
Lưu ý: Nhớ lưu lại template trước khi tiến hành làm bất cứ thay đổi điều gì ở giao diện nhé!

Bước 2. Tìm thẻ </head> trong template.

Bước 3. Sau đó chèn đoạn code sau đây ngay trước nó :

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

Bước 4. Sau khi chèn xong bạn tìm tiếp <data:post.body/> trong template.
Bước 5. Chèn đoạn code sau ngay trên nó :

<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'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.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;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'>
</script>
</b:if>

Bước 6. Lưu mẫu (Lưu lại template)

Vậy là đã xong, bạn có thể load lại trang blog của mình để tận hưởng thành quả nhé! Nếu bạn có thắc mắc hay làm không được bạn có thể để lại câu hỏi, mình sẽ giúp các bạn.

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