[Codes] Nút đánh giá bài viết với Like & Dislike cho mọi phiên bản

Chức năng:

• Hiển thị số lượt đánh giá chuyên nghiệp.
  
• Thực hiện nhiều đánh giá một lúc mà không bị chuyển trang.

Ghi chú: Code được viết bởi [You must be registered and logged in to see this link.], tham khảo ý tưởng của [You must be registered and logged in to see this link.] và [You must be registered and logged in to see this link.].

Nếu bạn muốn sao chép hướng dẫn này đi nơi khác vui lòng không thay đổi bất kỳ thành phần nào trong code và phải ghi bản quyền thuộc [You must be registered and logged in to see this link.]

Hướng dẫn: Vào link sau để xem hướng dẫn. Không quảng cáo, không virus, không cần đăng ký thành viên ;-d

• punBB & phpBB2: [You must be registered and logged in to see this link.]
  
• phpBB3 & Invision:[You must be registered and logged in to see this link.]

---------------------------------------------------------------------
:c: 1. cho phpBB2 và punnBB
- CP> display> templates> QLTT> viewtopic_body
- tìm đoạn sau:

Code:

  <!-- BEGIN switch_vote_active -->
        <div class="vote gensmall">
          <!-- BEGIN switch_vote -->
          <div class="vote-button">
              <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a>
          </div>
          <!-- END switch_vote -->
          <!-- BEGIN switch_bar -->
          <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
              <!-- BEGIN switch_vote_plus -->
              <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
              </div>
              <!-- END switch_vote_plus -->
              <!-- BEGIN switch_vote_minus -->
              <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
              </div>
              <!-- END switch_vote_minus -->
          </div>
          <!-- END switch_bar -->
          <!-- BEGIN switch_no_bar -->
          <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">
              ----
          </div>
          <!-- END switch_no_bar -->
          <!-- BEGIN switch_vote -->
          <div class="vote-button">
              <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a>
          </div>
          <!-- END switch_vote -->
        </div>
        <!-- END switch_vote_active -->

- xóa đoạn đó và thay bằng đoạn sau:
---> đặt bên phải :

Code:

  <span class="loadFMvi">
          <img alt="Loading" src="http://farm04.go.vn/photo/data/20111012/10798851/946D73AB7E9F949624C2BF756D1ED794.gif"
          />
        </span>
        <div class="voteTopic">
          <!-- BEGIN switch_vote_active -->
          <div class="vote gensmall">
              <!-- BEGIN switch_vote -->
              <div class="vote-button">
                <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a>
              </div>
              <!-- END switch_vote -->
              <!-- BEGIN switch_bar -->
              <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                <!-- BEGIN switch_vote_plus -->
                <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
                </div>
                <!-- END switch_vote_plus -->
                <!-- BEGIN switch_vote_minus -->
                <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
                </div>
                <!-- END switch_vote_minus -->
              </div>
              <!-- END switch_bar -->
              <!-- BEGIN switch_no_bar -->
              <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">
                ----
              </div>
              <!-- END switch_no_bar -->
              <!-- BEGIN switch_vote -->
              <div class="vote-button">
                <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a>
              </div>
              <!-- END switch_vote -->
          </div>
          <!-- END switch_vote_active -->
        </div>

----> đặt bên trái:

Code:

 <div class="voteTopic">
          <!-- BEGIN switch_vote_active -->
          <div class="vote gensmall">
              <!-- BEGIN switch_vote -->
              <div class="vote-button">
                <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a>
              </div>
              <!-- END switch_vote -->
              <!-- BEGIN switch_bar -->
              <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                <!-- BEGIN switch_vote_plus -->
                <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;">
                </div>
                <!-- END switch_vote_plus -->
                <!-- BEGIN switch_vote_minus -->
                <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;">
                </div>
                <!-- END switch_vote_minus -->
              </div>
              <!-- END switch_bar -->
              <!-- BEGIN switch_no_bar -->
              <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">
                ----
              </div>
              <!-- END switch_no_bar -->
              <!-- BEGIN switch_vote -->
              <div class="vote-button">
                <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a>
              </div>
              <!-- END switch_vote -->
          </div>
          <!-- END switch_vote_active -->
        </div>
        <span class="loadFMvi">
          <img alt="Loading" src="http://farm04.go.vn/photo/data/20111012/10798851/946D73AB7E9F949624C2BF756D1ED794.gif"
          />
        </span> 

- chèn vào cuối viewtopic_body
----> đặt bên phải:

Code:

  <style type="text/css">
        .voteTopic {
            padding: 4px;
            background: #fff;
            color: #000;
            border:1px solid # a0b0c0;
            font - size: 12px;
            font - weight: bold;
            margin: 0 10px;
            height: 17px;
            display: inline;
        }
        .voteTopic a {
            cursor: default;
            vertical - align:
            middle;
        }
        .voteTopic span, .voteTopic a {
            display: inline;
        }
        .voteTopic .plusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_b12.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .xplusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_n11.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .xminusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik16.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .minusFMvi{
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik15.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .loadFMvi, .vote {
            display:none;
            margin: 0;
        }
        </style>       
        <script type="text/javascript">
        $('.voteTopic').each(function (index) {
          $(this).prev().attr('alt', 'vote'+index);
          $(this).before('<iframe name="vote' + index + '" height="0px" width="0px" frameborder="0"></iframe>');
          $(this).attr('alt', 'vote'+index).prepend('<span alt="vote'+index+'" class="xplusFMvi"></span><span class="cong" alt="vote'+index+'">0</span>    <span alt="vote'+index+'" class="xminusFMvi"></span><span class="tru" alt="vote'+index+'">0</span>');
          var altthis = $(this).attr('alt');
          var plink = $(this).find('a[href$="eval=plus"]').attr('href');
            var mlink = $(this).find('a[href$="eval=minus"]').attr('href');
            if ($(this).find('.vote a').length > 0) {
          $('.xplusFMvi[alt="'+altthis+'"]').replaceWith('<a style="display: inline-block" target="' + altthis + '" href="'+plink+'"><span alt="'+altthis+'" class="plusFMvi"></span></a>');
          $('.xminusFMvi[alt="'+altthis+'"]').replaceWith('<a target="' + altthis + '" href="'+mlink+'"><span alt="'+altthis+'" class="minusFMvi"></span></a>');
            };
            if ($(this).find('.vote-bar').length > 0) {
                var z = $(this).find('.vote-bar').attr('title').split(' ');
                var m = parseInt(z[3].replace(/%/, '')) / 100;
                var n = parseInt(z[4].replace(/\(/, ''));
                c = String(Math.round(n * m));
                d = String(n - c);
                $('.cong[alt="'+altthis+'"]').replaceWith('<span class="cong" alt="'+altthis+'">'+c+'</span>');
                $('.tru[alt="'+altthis+'"]').replaceWith('<span class="tru" alt="'+altthis+'">'+d+'</span>');
            };
            $('.plusFMvi').click(function () {
                var altcong = $(this).attr('alt');
                var x = Number($('.cong[alt="'+altcong+'"]').text())+1;
                $('.plusFMvi[alt="'+altcong+'"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="'+altcong+'"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="'+altcong+'"]').show().fadeOut(1000, function(){
                $('.cong[alt="'+altcong+'"]').replaceWith('<span class="cong">'+x+'</span>');
                });
            });
            $('.minusFMvi').click(function () {
                var alttru = $(this).attr('alt');
                var y = Number($('.tru[alt="'+alttru+'"]').text())+1;
                $('.plusFMvi[alt="'+alttru+'"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="'+alttru+'"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="'+alttru+'"]').show().fadeOut(1000, function(){
                  $('.tru[alt="'+alttru+'"]').replaceWith('<span class="cong">'+y+'</span>');
                });
            });
        });
        </script>

----> đặt bên trái:

Code:

 <style type="text/css">
        .voteTopic {
            padding: 4px;
            background: #fff;
            color: #000;
            border:1px solid # a0b0c0;
            font - size: 12px;
            font - weight: bold;
            margin: 0 10px;
            height: 17px;
            display: inline;
        }
        .voteTopic a {
            cursor: default;
            vertical - align:
            middle;
        }
        .voteTopic span, .voteTopic a {
            display: inline;
        }
        .voteTopic .plusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_b12.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .xplusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_n11.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .xminusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik16.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .minusFMvi{
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik15.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .loadFMvi, .vote {
            display:none;
            margin: 0;
        }
        </style>       
        <script type="text/javascript">
        $('.voteTopic').each(function (index) {
          $(this).next().attr('alt', 'vote'+index);
          $(this).before('<iframe name="vote' + index + '" height="0px" width="0px" frameborder="0"></iframe>');
          $(this).attr('alt', 'vote'+index).prepend('<span alt="vote'+index+'" class="xplusFMvi"></span><span class="cong" alt="vote'+index+'">0</span>    <span alt="vote'+index+'" class="xminusFMvi"></span><span class="tru" alt="vote'+index+'">0</span>');
          var altthis = $(this).attr('alt');
          var plink = $(this).find('a[href$="eval=plus"]').attr('href');
            var mlink = $(this).find('a[href$="eval=minus"]').attr('href');
            if ($(this).find('.vote a').length > 0) {
          $('.xplusFMvi[alt="'+altthis+'"]').replaceWith('<a style="display: inline-block" target="' + altthis + '" href="'+plink+'"><span alt="'+altthis+'" class="plusFMvi"></span></a>');
          $('.xminusFMvi[alt="'+altthis+'"]').replaceWith('<a target="' + altthis + '" href="'+mlink+'"><span alt="'+altthis+'" class="minusFMvi"></span></a>');
            };
            if ($(this).find('.vote-bar').length > 0) {
                var z = $(this).find('.vote-bar').attr('title').split(' ');
                var m = parseInt(z[3].replace(/%/, '')) / 100;
                var n = parseInt(z[4].replace(/\(/, ''));
                c = String(Math.round(n * m));
                d = String(n - c);
                $('.cong[alt="'+altthis+'"]').replaceWith('<span class="cong" alt="'+altthis+'">'+c+'</span>');
                $('.tru[alt="'+altthis+'"]').replaceWith('<span class="tru" alt="'+altthis+'">'+d+'</span>');
            };
            $('.plusFMvi').click(function () {
                var altcong = $(this).attr('alt');
                var x = Number($('.cong[alt="'+altcong+'"]').text())+1;
                $('.plusFMvi[alt="'+altcong+'"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="'+altcong+'"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="'+altcong+'"]').show().fadeOut(1000, function(){
                $('.cong[alt="'+altcong+'"]').replaceWith('<span class="cong">'+x+'</span>');
                });
            });
            $('.minusFMvi').click(function () {
                var alttru = $(this).attr('alt');
                var y = Number($('.tru[alt="'+alttru+'"]').text())+1;
                $('.plusFMvi[alt="'+alttru+'"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="'+alttru+'"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="'+alttru+'"]').show().fadeOut(1000, function(){
                  $('.tru[alt="'+alttru+'"]').replaceWith('<span class="cong">'+y+'</span>');
                });
            });
        });
        </script>

----------------------------------------------------------------------------
:c: cho phpBB3
- ACP> Display> Colors & Pics> Colors> Css
- copy chèn codes sau:

Code:

 ul.profile - icons li.voteTopic {
          padding: 6px;
          line - height: 20px;
          background: #fff;
          color: #000;border:1px solid # a0b0c0;
          font - size: 12px;
          font - weight: bold
          width: 70px;
          height: 17px
        }
        ul.profile - icons li.voteTopic a {
              cursor: default;
          vertical - align:
          middle;
        }
        ul.profile-icons li span, ul.profile-icons li a {
            display: inline;
        }
        .voteTopic .plusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_b12.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .xplusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_n11.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .xminusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik16.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .minusFMvi{
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik15.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .loadFMvi, .vote {
            display:none;
            margin: 0;
        }

- ACP - Modules - HTML & JAVASCRIPT - Javascript codes management:
Title * : Like & Dislike
Placement : In the topics
Javascript Code * :
- copy chèn codes sau :

Code:

 $(function () {
          $('.profile-icons').each(function (index) {
              $(this).attr('alt', 'vote' + index).prepend('<li alt="vote' + index + '" class="voteTopic"><span alt="vote' + index + '" class="xplusFMvi"></span><span class="cong" alt="vote' + index + '">0</span><span alt="vote' + index + '" class="xminusFMvi"></span><span class="tru" alt="vote' + index + '">0</span><li>');
              $(this).prepend('<iframe name="vote' + index + '" height="0px" width="0px" frameborder="0"></iframe><li alt="vote' + index + '" class="loadFMvi"><img alt="Loading" src="http://farm04.go.vn/photo/data/20111012/10798851/946D73AB7E9F949624C2BF756D1ED794.gif" /></li>');
              var altthis = $(this).attr('alt');
              var plink = $(this).parent().find('a[href$="eval=plus"]').attr('href');
              var mlink = $(this).parent().find('a[href$="eval=minus"]').attr('href');
              if ($(this).parent().find('.vote a').length > 0) {
                $('.xplusFMvi[alt="' + altthis + '"]').replaceWith('<a target="' + altthis + '" href="' + plink + '"><span alt="' + altthis + '" class="plusFMvi"></span></a>');
                $('.xminusFMvi[alt="' + altthis + '"]').replaceWith('<a target="' + altthis + '" href="' + mlink + '"><span alt="' + altthis + '" class="minusFMvi"></span></a>');
              };
              if ($(this).parent().find('.vote-bar').length > 0) {
                var z = $(this).parent().find('.vote-bar').attr('title').split(' ');
                var m = parseInt(z[3].replace(/%/, '')) / 100;
                var n = parseInt(z[4].replace(/\(/, ''));
                c = String(Math.round(n * m));
                d = String(n - c);
                $('.cong[alt="' + altthis + '"]').replaceWith('<span class="cong" alt="' + altthis + '">' + c + '</span>');
                $('.tru[alt="' + altthis + '"]').replaceWith('<span class="tru" alt="' + altthis + '">' + d + '</span>');
              };
              $('.plusFMvi').click(function () {
                var altcong = $(this).attr('alt');
                var x = Number($('.cong[alt="' + altcong + '"]').text()) + 1;
                $('.plusFMvi[alt="' + altcong + '"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="' + altcong + '"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="' + altcong + '"]').show().fadeOut(1000, function () {
                    $('.cong[alt="' + altcong + '"]').replaceWith('<span class="cong">' + x + '</span>');
                });
              });
              $('.minusFMvi').click(function () {
                var alttru = $(this).attr('alt');
                var y = Number($('.tru[alt="' + alttru + '"]').text()) + 1;
                $('.plusFMvi[alt="' + alttru + '"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="' + alttru + '"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="' + alttru + '"]').show().fadeOut(1000, function () {
                    $('.tru[alt="' + alttru + '"]').replaceWith('<span class="cong">' + y + '</span>');
                });
              });
          });
        }); 

-----------------------------------------------------------------------------
:c: cho invision
- ACP> Display> Colors & Pics> Colors> Css
- copy chèn codes sau:

Code:

 ul.post-info li.voteTopic {
          padding: 6px;
          line - height: 20px;
          background: #fff;
          color: #000;border:1px solid # a0b0c0;
          font - size: 12px;
          font - weight: bold
          width: 70px;
          height: 17px
        }
        ul.post-info li.voteTopic a {
              cursor: default;
          vertical - align:
          middle;
        }
        ul.post-info li span, ul.post-info li a {
            display: inline;
        }
        .voteTopic .plusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_b12.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .xplusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/like_n11.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .xminusFMvi {
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik16.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .voteTopic .minusFMvi{
            background: url(http://i48.servimg.com/u/f48/16/58/89/73/dislik15.png) no-repeat scroll center center transparent;
            padding: 0 12px;
        }
        .loadFMvi, .vote {
            display:none;
            margin: 0;
        }

- ACP - Modules - HTML & JAVASCRIPT - Javascript codes management:

Title * : Like & Dislike
Placement : In the topics
Javascript Code * :
- copy và chèn codes sau:

Code:

  $(function () {
          $('.post-info').each(function (index) {
              $(this).attr('alt', 'vote' + index).prepend('<li alt="vote' + index + '" class="voteTopic"><span alt="vote' + index + '" class="xplusFMvi"></span><span class="cong" alt="vote' + index + '">0</span><span alt="vote' + index + '" class="xminusFMvi"></span><span class="tru" alt="vote' + index + '">0</span><li>');
              $(this).prepend('<iframe name="vote' + index + '" height="0px" width="0px" frameborder="0"></iframe><li alt="vote' + index + '" class="loadFMvi"><img alt="Loading" src="http://farm04.go.vn/photo/data/20111012/10798851/946D73AB7E9F949624C2BF756D1ED794.gif" /></li>');
              var altthis = $(this).attr('alt');
              var plink = $(this).parent().parent().find('a[href$="eval=plus"]').attr('href');
              var mlink = $(this).parent().parent().find('a[href$="eval=minus"]').attr('href');
              if ($(this).parent().parent().find('.vote a').length > 0) {
                $('.xplusFMvi[alt="' + altthis + '"]').replaceWith('<a target="' + altthis + '" href="' + plink + '"><span alt="' + altthis + '" class="plusFMvi"></span></a>');
                $('.xminusFMvi[alt="' + altthis + '"]').replaceWith('<a target="' + altthis + '" href="' + mlink + '"><span alt="' + altthis + '" class="minusFMvi"></span></a>');
              };
              if ($(this).parent().parent().find('.vote-bar').length > 0) {
                var z = $(this).parent().parent().find('.vote-bar').attr('title').split(' ');
                var m = parseInt(z[3].replace(/%/, '')) / 100;
                var n = parseInt(z[4].replace(/\(/, ''));
                c = String(Math.round(n * m));
                d = String(n - c);
                $('.cong[alt="' + altthis + '"]').replaceWith('<span class="cong" alt="' + altthis + '">' + c + '</span>');
                $('.tru[alt="' + altthis + '"]').replaceWith('<span class="tru" alt="' + altthis + '">' + d + '</span>');
              };
              $('.plusFMvi').click(function () {
                var altcong = $(this).attr('alt');
                var x = Number($('.cong[alt="' + altcong + '"]').text()) + 1;
                $('.plusFMvi[alt="' + altcong + '"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="' + altcong + '"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="' + altcong + '"]').show().fadeOut(1000, function () {
                    $('.cong[alt="' + altcong + '"]').replaceWith('<span class="cong">' + x + '</span>');
                });
              });
              $('.minusFMvi').click(function () {
                var alttru = $(this).attr('alt');
                var y = Number($('.tru[alt="' + alttru + '"]').text()) + 1;
                $('.plusFMvi[alt="' + alttru + '"]').replaceWith('<span class="xplusFMvi"></span>');
                $('.minusFMvi[alt="' + alttru + '"]').replaceWith('<span class="xminusFMvi"></span>');
                $('.loadFMvi[alt="' + alttru + '"]').show().fadeOut(1000, function () {
                    $('.tru[alt="' + alttru + '"]').replaceWith('<span class="cong">' + y + '</span>');
                });
              });
          });
        });

nguồn : 4all - fmvi