- Đố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:
- Demo: tại đây
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ư:
- Đánh giá 1 ngôi sao: Ghét bài này
- Đánh giá 2 ngôi sao: Không thích bài này
- Đánh giá 3 ngôi sao: Thích bài này
- Đánh giá 4 ngôi sao: Rất thích
- Đánh giá 5 ngôi sao: Yêu thích.
+ Ư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!
- 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!
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 1Blogspot 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:
Tìm tới thẻ <div class='post-footer'> và dán đoạn code sau vào sau nó
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:
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ó
- 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.
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ạn thêm đoạn code sau vào ngay trên <b:else/>
<b:include name='mobile-main'/>
</b:if>
<b:if cond='data:top.showPlusOne'>
<data:top.googlePlusBootstrap/>
</b:if>
</b:includable>
<!-- feed links -->Bước 2: Chung cho cả 2 cách trên:
<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>
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 == "item"'>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.
<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>
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'>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.
<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>
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 == "item"'>Lưu mẫu và xem kết quả.
<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>
- 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
0 Nhận xét