Giao diện chức năng vote làm theo mẫu của google plus, vì thế mình chỉ dùng nút vote +, còn nút vote - thì bỏ đi. Nếu diễn đàn bạn từng dùng cả 2 loại trước đây cũng sẽ không bị lỗi khi chuyển sang dùng zzVotePlus.
Ngoài ra, chức năng gửi thông báo lên tường cũng được tích hợp sẵn.
DEMO

http://devs.forumvi.com/
HƯỚNG DẪN

BƯỚC 1
Thêm vào CSS:

Code:

/* zzVotePlus by Admin - thanhdang.forumvi.com */
div.vote-zzvote{float:left;margin-left:2em}
div.vote-zzvote > a.vote-plus{background:none no-repeat center #FFF;color:#444;cursor:pointer;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.05);box-shadow:0 1px 0 rgba(0,0,0,.05);border:1px solid #d9d9d9;border-radius:3px;font-size:11px;font-weight:700;display:inline-block;float:left;height:22px;line-height:20px;transition:background .3s;-webkit-transition:background .3s;-moz-transition:background .3s;padding:0 7px}
div.vote-zzvote > a.vote-plus:hover{border-color:#666}
div.vote-zzvote > a.vote-plus[href=""]{border:0 none;line-height:22px;background-color:#dd4b39;cursor:default;color:#FFF}
div.vote-zzvote > a.vote-plus.dis{background-color:#FFF;color:#CCC}
div.vote-zzvote > a.vote-plus.dis:hover{border-color:#d9d9d9;cursor:not-allowed}

BƯỚC 2
Sửa temp viewtopic_body:
Tìm và xóa :

Code:

<!-- BEGIN switch_vote_active -->
...
<!-- END switch_vote_active -->

Đặt code Temp này ở trong div.post-options

Code:

<!-- zzVotePlus by Zzbaivong - devs.forumvi.com -->
<div class="vote-zzvote">
   <!-- BEGIN switch_vote_active -->
   <a class="vote-plus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}<!-- END switch_vote -->">
      +<span class="vote-time" data-vote="<!-- BEGIN switch_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_bar --><!-- BEGIN switch_no_bar -->{postrow.displayed.switch_vote_active.L_VOTE_TITLE}<!-- END switch_no_bar -->">1</span>
   </a>
   <!-- END switch_vote_active -->
</div>

Đặt code này ở trước div.main-foot hoặc cuối template viewtopic_body:

Code:

<!-- zzVotePlus by Zzbaivong - devs.forumvi.com -->
<script type="text/javascript">
   //<![CDATA[
   $(".vote-zzvote:empty").html('<a class="vote-plus dis" href="javascript:;">+<span class="vote-time" data-vote="Message not voted">1</span></a>');
   $(".vote-time").text(function() {
      var a = $(this).data("vote");
      if ("Message not voted" == a) return $(this).data("vote", 0), 1;
      a = a.split(/\W/);
      time = parseInt(a[7], 10);
      percent = parseInt(a[4], 10);
      plus = Math.round(percent / 100 * time);
      $(this).data("vote", plus);
      if (0 !== plus) return plus
   });
   $(".vote-plus").on("click", function(a) {
      a.preventDefault();
      var b = $(this),
         c = $(".vote-time", b); - 1 != this.href.indexOf("eval=plus&p_vote") && (b.css("background-image", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif)"), $.post(this.href, function() {
            c.text(parseInt(c.data("vote"), 10) + 1);
            $post = b.closest(".post");
            $user = $post.find(".user a[href^='/u']:not(:has(img)):first");
            $.post("/privmsg", {
               subject: "Bài viết hay",
               message: "Mình thích bài viết của bạn tại [url=" +
                  $post.find(".posthead a[href^='/t'][href*='#']")[0].href + "]" + document.title + "[/url]",
               username: $.trim($user.text()),
               u: $user.attr("href").replace(/.*\/u(\d+).*/, "$1"),
               mode: "post_profile",
               folder: "profile",
               post: "Send"
            }, function() {
               b.removeAttr("style")
            })
         }), this.href = "")
   });
   //]]>
</script>

Chú ý: Nếu bạn nhấn vote mà kết quả trả về là NaN thì ở code javascript, dòng 7 và dòng 12, bạn sửa:

Code:

data("vote"

thành

Code:

attr("data-vote"

Good !

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

?