Đánh giá bài viết 5 sao vào cuối bài viết - Hoan Hihi Blog

Hê lô mọi người ^^

Thì hôm nay mình lại xin gửi đến các bạn một thủ thuật Blogger nữa :v không biết mọi người có để ý là các bài viết trên Wordpress đều có phần đánh giá bài viết ở cuối bài khô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.

DEMO

Cách thực hiện:

Đầu tiên: Tìm đến thẻ ]]></b:skin> và dán đoạn CSS sau trước nó.

.hidden{opacity:0}.star{display:inline-block;margin:5px;font-size:30px;color:whitesmoke;position:relative}.star.animate{-webkit-animation:stretch-bounce .5s ease-in-out}.star.hidden{opacity:0}.full:before{font-family:fontAwesome;display:inline-block;content:"\f005";position:relative;float:right;z-index:2}.half:before{font-family:fontAwesome;content:"\f089";position:absolute;float:left;z-index:3}.star-colour{color:#ffd700}@-webkit-keyframes stretch-bounce{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(1.5)}50%{-webkit-transform:scale(0.9)}75%{-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1)}}.selected:before{font-family:fontAwesome;display:inline-block;content:"\f005";position:absolute;top:0;left:0;-webkit-transform:scale(1);opacity:1;z-index:1}.selected.pulse:before{-webkit-transform:scale(3);opacity:0}.selected.is-animated:before{transition:1s ease-out}.score{font-family:arial;font-size:20px;color:green;margin-top:20px;margin-left:50px}.score-rating{vertical-align:sup;top:-5px;position:relative;font-size:150%}.total{vertical-align:sub;top:0;position:relative;font-size:100%}.average{font-family:arial;font-size:20px;color:indianred;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.average .score-average{padding-top:30px}

Bước 2: Tìm đến thẻ </body> và dán đoạn javascript dưới đây trước nó.

<script type='text/javascript'>var starClicked = false;
$(function() {
$('.star').click(function() {
$(this).children('.selected').addClass('is-animated'); $(this).children('.selected').addClass('pulse');
var target = this;
setTimeout(function() { $(target).children('.selected').removeClass('is-animated'); $(target).children('.selected').removeClass('pulse'); }, 1000);
starClicked = true; })
$('.half').click(function() { if (starClicked == true) { setHalfStarState(this) } $(this).closest('.rating').find('.js-score').text($(this).data('value'));
$(this).closest('.rating').data('vote', $(this).data('value')); calculateAverage() console.log(parseInt($(this).data('value')));
})
$('.full').click(function() { if (starClicked == true) { setFullStarState(this) } $(this).closest('.rating').find('.js-score').text($(this).data('value'));
$(this).find('js-average').text(parseInt($(this).data('value')));
$(this).closest('.rating').data('vote', $(this).data('value')); calculateAverage()
console.log(parseInt($(this).data('value'))); })
$('.half').hover(function() { if (starClicked == false) { setHalfStarState(this) }
})
$('.full').hover(function() { if (starClicked == false) { setFullStarState(this) } })
})
function updateStarState(target) { $(target).parent().prevAll().addClass('animate'); $(target).parent().prevAll().children().addClass('star-colour');
$(target).parent().nextAll().removeClass('animate'); $(target).parent().nextAll().children().removeClass('star-colour');}
function setHalfStarState(target) { $(target).addClass('star-colour'); $(target).siblings('.full').removeClass('star-colour'); updateStarState(target)}
function setFullStarState(target) { $(target).addClass('star-colour'); $(target).parent().addClass('animate'); $(target).siblings('.half').addClass('star-colour');
updateStarState(target)}
function calculateAverage() { var average = 0
$('.rating').each(function() { average += $(this).data('vote') })
$('.js-average').text((average/ $('.rating').length).toFixed(1))}</script>

Bước 3. Tìm tiếp cho mình thẻ <data:post.body/> và dán đoạn HTML dưới đây vào saunó.* Lưu ý: Một Template thường có 4 <data:post.body/> bạn cần tìm đúng nhé, thường thì dòng thứ 3.

<div class="rating" data-vote="0">
<div class="star hidden"> <span class="full" data-value= "0"></span> <span class="half" data-value= "0"></span> </div>
<div class="star">
<span class="full" data-value="1"></span> <span class="half" data-value="0.5"></span> <span class="selected"></span>
</div>
<div class="star">
<span class="full" data-value="2"></span> <span class="half" data-value="1.5"></span> <span class="selected"></span>
</div>
<div class="star">
<span class="full" data-value="3"></span> <span class="half" data-value="2.5"></span> <span class="selected"></span>
</div>
<div class="star">
<span class="full" data-value="4"></span> <span class="half" data-value="3.5"></span> <span class="selected"></span>
</div>
<div class="star">
<span class="full" data-value="5"></span> <span class="half" data-value="4.5"></span> <span class="selected"></span>
</div>
<div class="score"> <span class="score-rating js-score">0</span> <span>/</span> <span class="total">5</span> </div></div> </div>

LƯU Ý: Thêm font awesome dưới đây vào trước thẻ </head> nếu Blog bạn chưa có nhé !

<script type='text/javascript'>//<![CDATA[//CSS Readyfunction loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");//]]></script>

Bước 4. Các bạn save lại và kiểm tra nhé !
=======
Như vậy thì mình vừa chia sẻ tới các bạn một thủ thuật nữa dành cho Blogger rồi các bạn thấy hay thì chia sẻ cho mình nhé xincamon ^^.

Thích

9 bình luận