Hướng dẫn thêm đánh giá KK Star ratings 5 ngôi sao cho Blogspot

0
55

Đối với người dùng WordPress thì việc sử dụng Plugin đánh giá KK Star Rating làm nổi bật bài viết trên Google Seach rất đơn giản chỉ cần cài đặt Plugin là được. Tuy nhiên, đối với người dùng Blogspot lại không thế, trước đây tính năng đánh giá bài viết có sẵn trên Bogspot nhưng bây giờ đã bị xóa bỏ, không có sẵn Plugin nào  cho các Blogger cài đặt cả, tất cả chúng ta cần tự Code.

– Hôm nay tôi xin gửi đến các bạn cách code để thêm đánh giá 5 ngôi sao vào Blogspot:

1. Tính năng của code này là các bạn có thể thêm ngôi sao đánh giá bài viết vào Blogspot giống y hệt như trên WordPress, với 5 ngôi sao màu vàng, đầy đủ cảm xúc về bài viết như:

  1.  Đánh giá 1 ngôi sao: Ghét bài này
  2.  Đánh giá 2 ngôi sao:  Không thích bài này
  3.  Đánh giá 3 ngôi sao: Thích bài này
  4.  Đánh giá 4 ngôi sao: Rất thích
  5.  Đánh giá 5 ngôi sao: Yêu thích.

– 5 trạng thái này được bố trí ở iframe bên phải tương ứng với 5 ngôi sao hoạt hình. Nhìn thì nó không được hoành tráng như kk star ratings của WordPress nhưng cũng đủ chức năng.
+ Ưu điểm khi sử dụng code đánh giá 5 sao:

  • Bài viết trên Blog của bạn sẽ chuyên nghiệp hơn, được người dùng tin tưởng hơn vì có đánh giá, Google cũng sẽ đánh giá bạn cao hơn so với các Blog khác.
  • Kết quả hiển thị trên công cụ tìm kiếm Google Seach nổi bật hơn, nhìn vào hình ảnh dưới đây rõ ràng bài viết của các bạn là nổi bật hơn rồi!

+ Nhược điểm khi sử dụng đánh giá 5 sao:

  • Nếu có ai đó cố tình phá hại Blog của bạn, cho hàng loạt đánh giá 1 sao để hạ uy tín thì sẽ thật phiền phức!

Rõ ràng đây là một tính năng rất thú vị, đặc biệt với các Blog bán hàng cần niềm tin từ người dùng. Tuy nhiên, không hiểu vì lý do gì mà Google lại loại bỏ tính năng này trên Blogspot kể từ năm 2010. Đối với các Blog đã được tạo từ trước năm 2010 thì vẫn được duy trì tính năng này, các bạn sẽ có sẵn đoạn javascript cho tiện ích đánh giá 5 ngôi sao này cho Blogspot của mình.

Đánh giá bài viết với Star ratings cho blogspot
Trong ảnh phần khoanh đỏ chính là sự hiện diện của nó trước đây

Để dùng lại tính năng đánh giá bài viết này, các bạn chỉ cần kích hoạt lại là được.

2. Do vậy khi cài đặt tiện ích này sẽ có 2 trường hợp bạn phải giải quyết:

Trường hợp 1
Blogspot không còn thẻ <b:include name=’feedLinks’/> và không còn đoạn javascript ngay sau nó.
Bước 1
Cách 1: Sử dụng tiếng Anh cho đánh giá:
Các bạn dán đoạn javascript sau vào trước thẻ </body>

 

<script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
Cách 2: Sử dụng tiếng Việt cho đánh giá:
Trả lại <b:include name=’feedLinks’/> và thêm javascript.
Bạn mở rộng thẻ <b:includable id=’main’ var=’top’> ở cuối gần thẻ đóng nó có dạng:

<b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showPlusOne'>
    <data:top.googlePlusBootstrap/>
  </b:if>
</b:includable>

Bạn thêm đoạn code sau vào ngay trên <b:else/>

<!-- feed links -->
    <b:include name='feedLinks'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>

Bước 2: Chung cho cả 2 cách trên:
Tìm tới thẻ <div class=’post-footer’> và dán đoạn code sau vào sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <span class='star-ratings'>
      <div expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:background-color='#fff' g:height='35' g:type='RatingPanel' g:width='155' />
   </span>
   <div style='clear: both;'/>
</b:if>

Nếu sử dụng cách 2 thì trị số g:width=’155′ sửa lại thành 220 cho vừa với tiếng việt.
Lưu mẫu và xem kết quả.
Trường hợp 2
Bước 1
+ Nếu blogspot đang sử dụng mẫu cơ bản có từ trước những năm 2010 thì vẫn còn thẻ <b:include name=’feedLinks’/> và ngay sau nó là đoạn javascript:

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

Bạn chỉ cần bỏ thẻ điều kiện là 2 dòng tô màu vàng là xong bước 1.
Tiện ích sẽ có ngôn ngữ là tiếng Việt vì là blog tiếng Việt.
+ Nếu blogspot sử dụng HTML dựa trên nền tảng HTML mới của blogger thì vẫn có thẻ <b:include name=’feedLinks’/> nhưng không có đoạn javascript thì bạn cứ thêm vào sau nó đoạn javascript đã bỏ thẻ điều kiện.
Bước 2
Tìm tới thẻ <div class=’post-footer’> và dán đoạn code sau vào sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <span class='star-ratings'>
      <div expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:background-color='#fff' g:height='35' g:type='RatingPanel' g:width='220' />
   </span>
   <div style='clear: both;'/>
</b:if>

Lưu mẫu và xem kết quả.
– Chú ý: Tiện ích chỉ có hiệu lực trên:
– Blogspot sử dụng tên miền riêng.
– Blogspot (blogspot.com) không sử dụng giao thức https.

– Tham khảo thêm nhiều thủ thuật về Blogspot tại: http://blog.doisong24.com

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây