Tạo nút Đánh giá bài viết 5 sao cho Blogger

Star Rating, Like Dislike Voting

Bạn muốn có nút bình chọn 5 sao hay nút like/dislike sau mỗi bài viết giống Wordpress. Hãy xem thử những thủ thuật trong bài viết dưới đây.

Tất nhiên do sự hạn chế của nền tảng Blogger, những nút đánh giá bên dưới chỉ mang tính chất làm đẹp là chính thôi, chúng không thể lưu lại kết quả đánh giá như Wordpress được, nhưng cũng đáng thể dùng thử phải không nào.

Lưu ý những thủ thuật dưới đây sẽ chỉ hiện nút bình chọn sau mỗi bài viết trên website của bạn, không phải Google Rich Snippets Ratings, tức là không phải hiện kết quả đánh giá 5 sao trong kết quả tìm kiếm trên Google.

Nếu muốn thực hiện thủ thuật Google Rich Snippets Ratings hay nút rating có thể lưu lại kết quả, các bạn có thể sử dụng plugin của bên thứ 3. tham khảo thêm ở bài viết bên dưới.

Xem thêm: Nút Like và Dislike không Facebook (Rating Post) dành cho Blogger

Cách thực hiện

1Đầu tiên là CSS, các bạn vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS trước thẻ ]]></b:skin>

2Đối với Javascript, các bạn tìm đến thẻ </body> và dán đoạn js trước thẻ đó.

3Thêm thư viện jQuery vào sau đoạn Js ở bước 2 và Font Awesome nếu như website của bạn chưa có

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Xem thêm: Cách thêm Font Awesome vào website

4Cuối cùng là HTML, các bạn tìm đến thẻ <data:post.body/> và dán HTML ở trước thẻ đó nếu muốn hiện nút đánh giá trước mỗi bài viết và dán ở sau thẻ đó để hiện sau mỗi bài viết.

Style 1: Bình chọn 5 sao

• DEMO

.rating{text-align:center;margin-top:120px;position:relative;width:50%;float:left}
.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}

<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>

<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>

Style 2: Like/Dislike Voting

• DEMO

@import url(http://weloveiconfonts.com/api/?family=fontawesome);@import url(http://fonts.googleapis.com/css?family=Montserrat);/* fontawesome */
[class*="fontawesome-"]:before{font-family:'FontAwesome',sans-serif}
.container{border-radius:10px;height:90px;margin:50px auto;overflow:hidden;position:relative;width:390px}
.up,.down{border-radius:10px;background:rgba(255,255,255,0.2);color:rgba(255,255,255,0.5);float:left;font-size:50px;height:100%;line-height:90px;text-align:center;transition:all .2s linear;width:90px}
.down{margin-left:60px}
.check{background:#f65330;border-radius:10px;color:#fff;cursor:pointer;font-size:50px;height:100%;line-height:90px;position:absolute;padding-left:20px;right:-320px;transition:all .2s linear;width:100%}
.check:after{content:'Mark Complete';font:35px/90px 'Montserrat';font-style:italic;height:100%;padding-left:20px}
.up:hover{background:#2ecc71;color:#fff;cursor:pointer}
.down:hover{background:#e74c3c;color:#fff;cursor:pointer}
.ok{background:#30c3bb;right:-20px}
.scaleDown{transform:scale(0)}

<script type='text/javascript'>
var voted = false;

$('.check').click(function(){
  if(voted)reset();
});

$('.up').click(function(){
  $(this).addClass('scaleDown');
  $('.down').addClass('scaleDown');
  $('.check').addClass('ok');
  voted = true;
});

$('.down').click(function(){
  $(this).addClass('scaleDown');
  $('.up').addClass('scaleDown');
  $('.check').addClass('ok');
  voted = true;
});

function reset(){
    $('.scaleDown').removeClass('scaleDown');
    $('.check').removeClass('ok');
    voted = false;
   
}
</script>

<div class="container">
  <div class="up fontawesome-thumbs-up"></div>
  <div class="down fontawesome-thumbs-down"></div>
  <div class="check fontawesome-ok"></div>
</div>

Style 3: Like/Dislike Voting có kèm theo số đếm

• DEMO

.vote{width:80px;height:80px;background:#3498db;text-align:center;color:#fff;-webkit-transition:all .4s ease;transition:all .4s ease;position:absolute;margin:auto;top:0;bottom:0;right:0;left:0;cursor:pointer}
.vote:hover{background:#5faee3}
.vote:active{background:#217dbb}
.vote .text{font:20px/80px 'Lato',Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:80px;height:80px}
.vote .like,.vote .dislike{line-height:80px;font-size:40px;-webkit-transition:all .4s ease;transition:all .4s ease;cursor:pointer;position:absolute;margin:auto;top:0;bottom:0;right:0;left:0;z-index:-10}
.vote .like{background:#2ecc71}
.vote .like:hover{background:#54d98c}
.vote .like:active{background:#25a25a}
.vote .like:after{content:attr(data-likes);font-family:'Lato',Helvetica,sans-serif;font-size:12px;display:block;width:80px;height:20px;background:rgba(0,0,0,0.7);color:#fff;line-height:20px;-webkit-transform:translate(0,-20px);transform:translate(0,-20px);opacity:0;position:absolute;-webkit-transition:all .4s ease;transition:all .4s ease}
.vote .like:hover:after{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}
.vote .like:before{content:'Like';font-family:'Lato',Helvetica,sans-serif;font-size:12px;display:block;width:80px;height:20px;background:rgba(0,0,0,0.7);color:#fff;line-height:20px;opacity:0;position:absolute;-webkit-transition:all .4s ease;transition:all .4s ease}
.vote .like:hover:before{opacity:1;-webkit-transform:translate(0,-20px);transform:translate(0,-20px)}
.vote .dislike{background:#c0392b}
.vote .dislike:hover{background:#d65548}
.vote .dislike:active{background:#962d22}
.vote .dislike:after{content:attr(data-dislikes);font-family:'Lato',Helvetica,sans-serif;font-size:12px;display:block;width:80px;height:20px;background:rgba(0,0,0,0.7);color:#fff;line-height:20px;-webkit-transform:translate(0,-20px);transform:translate(0,-20px);opacity:0;position:absolute;-webkit-transition:all .4s ease;transition:all .4s ease}
.vote .dislike:hover:after{opacity:1;-webkit-transform:translate(0,0);transform:translate(0,0)}
.vote .dislike:before{content:'Dislike';font-family:'Lato',Helvetica,sans-serif;font-size:12px;display:block;width:80px;height:20px;background:rgba(0,0,0,0.7);color:#fff;line-height:20px;opacity:0;position:absolute;-webkit-transition:all .4s ease;transition:all .4s ease}
.vote .dislike:hover:before{opacity:1;-webkit-transform:translate(0,-20px);transform:translate(0,-20px)}
.like_active{-webkit-transform:translate(-80px,0px);transform:translate(-80px,0px)}
.dislike_active{-webkit-transform:translate(80px,0px);transform:translate(80px,0px)}

<script type='text/javascript'>
$(document).ready(function() {
  var likes = 12;
  var dislikes = 6;
  $('.like').attr('data-likes', likes);
  $('.dislike').attr('data-dislikes', dislikes);
  $('.text').click(function() {
    $('.like').toggleClass('like_active');
    $('.dislike').toggleClass('dislike_active');
    if ($('.text').text() == 'Vote') {
      $('.text').text('Cancel');
    } else {
      $('.text').text('Vote');
    }
  })
  $('.like').click(function() {
    likes++;
    $('.like').attr('data-likes', likes);
    $('.like').removeClass('like_active');
    $('.dislike').removeClass('dislike_active');
    $('.text').text('Vote');
  })  
  $('.dislike').click(function() {
    dislikes++;
    $('.dislike').attr('data-dislikes', dislikes);
    $('.like').removeClass('like_active');
    $('.dislike').removeClass('dislike_active');
    $('.text').text('Vote');
  })
})
</script>

<div class="vote">
  <span class="text">Vote</span>
  <div class="like" data-likes="10"><i class="fa fa-thumbs-up"></i></div>  
  <div class="dislike" data-dislikes="10"><i class="fa fa-thumbs-down"></i></div>
</div>

Cập nhật

Nếu bạn có vấn đề khi sử dụng các đoạn code trên và muốn lưu lại kết quả rating bạn có thể sử dụng plugin của bên thứ 3. Cụ thể như sau:

Graddit

1Truy cập vào địa chỉ www.graddit.com/ratings-widget và chọn cho mình style phù hợp.

2Nhìn qua tab bên phải mục Platform các bạn chọn Blogger và copy đoạn code bên dưới sau thẻ <data:post.body/>

3Ngoài ra tiện ích cũng có thể giúp bạn hiện 5 sao trên kết quả tìm kiếm của Google nữa đấy.

Likebtn

Xem thêm: Nút Like và Dislike không Facebook (Rating Post) dành cho Blogger

Vicomi

Xem thêm: Thêm Facebook Reactions vào bài viết và bình luận trên Blogger

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm