[Đóng góp] [Mod] Thank Hiện Người Thank

Demo online: http://viethoagame.forumvi.com/t434-topic
Demo Ảnh:
Reg nick và thử nghiệm tại: http://viethoagametest.forumvi.com/t2-topic#7
Hôm nay mình sẽ share cho các bạn mod này. Chỉ sử dụng một ít php thôi. Đơn giản dễ làm.
Những thứ bạn cần phải có:
1/ Một hosting dùng để lưu trữ. Bắt buột hosting đó phải hỗ trợ hàm fopen. Ở đây mình sử dụng hostinger.vn. Vừa miễn phí lại dễ sử dụng. Cách đăng ký các bạn có thể xem Tại đây.
2/ Sử dụng code vote của baivong bên Devs.cf ở link này: http://www.devs.cf/t15-tuts-fb_vote-anh-gia-bai-viet-va-thong-bao-len-tuong
3/ Sử dụng cho phiên bản Punbb. Tạm thời là vậy thôi. Có thời gian mình sẽ hướng dẫn thêm cho phiên bản Phpbb3 mình đang dùng.
Rồi bắt tay vào làm thôi.
Bước 1:
Sau khi đăng ký một tài khoản ở hostinger. Bạn vào phần quản lý file bạn vừa đăng ký,
Sau đó nhấp chuột phải vào để tạo 2 file text. Sau đó đổi tên 2 file đó thành luudulieu.php và dulieuthank.php như trong hình.

Sau khi tạo 2 file trên kia xong các bạn chép 2 file code phân biệt như sau:


-File luudulieu.php

Code:

<?php header("Access-Control-Allow-Origin: http://viethoagametest.forumvi.com");
echo $_POST['d'];
  $file = fopen("dulieuthank.php","a+");
   fwrite($file, ''. $_POST['d'].'');


-File dulieuthank.php

Code:

<?php header('Access-Control-Allow-Origin: http://viethoagametest.forumvi.com'); ?>


Sau khi chép xong các bạn đổi link http://viethoagametest.forumvi.com thành link forum của bạn nhé.


Sau khi đổi xong các bạn hãy nhấp đôi vào file đó để lấy link host. Ví dụ của mình là http://viethoagame.16mb.com/dulieuthank.php


Thì http://viethoagame.16mb.com là link host của mình.


Vậy là xong phần hosting rồi,
Giờ đến sửa template trong forumvi.
Nếu các bạn dùng tem mặc định của punbb sẽ dễ làm hơn.
Bước 2:
Các bạn chép đoạn css này vào:

Code:

/* fb_Vote - DEVs.forumvi.com */
.vote-Zzbaivong, .vote-Zzbaivong *,.vote-Zzbaivong *:before,.vote-Zzbaivong *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.vote-Zzbaivong{margin-left:2em;float:left;height:26px;line-height:24px;position:relative;text-align:left;white-space:nowrap}
.vote-plus-post,.vote-minus-post{z-index:10;position:absolute;top:32px;left:0;display:none;width:250px;background:#FFF;border:1px solid #F2F2F2;box-shadow:4px 4px 7px 0 #999;padding:5px}
.vote-plus{background:url(http://i57.servimg.com/u/f57/17/05/17/70/like10.png) no-repeat 5px 2px #deeaf7;height:24px;border:1px solid #C8D7EC;color:#5089BE!important;font-family:sans-serif;border-radius:2px;display:inline-block;padding:0 5px 0 25px}
.vote-plus:hover{border-color:#6A9AD6}
.vote-plus[href="javascript:;"]{color:#666!important;background-color:#DDD;cursor:no-drop;background-image:url(http://i57.servimg.com/u/f57/17/05/17/70/gpqbxh10.png);border-color:#CCC}
.vote-time{background:#FFF;position:relative;border-radius:2px;display:inline-block;height:24px;line-height:22px;border:1px solid #D8D7D7;margin:auto 5px;padding:0 5px}
.vote-time:before{content:'';display:inline-block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #CCC;position:absolute;left:-6px;width:6px;top:5px}
.vote-time:after{content:'';display:inline-block;border-bottom:5px solid transparent;border-top:5px solid transparent;border-right:5px solid #fff;position:absolute;left:-5px;width:5px;top:6px}
.vote-minus{margin-left:20px;color:#666!important}
.vote-minus:hover{color:red!important}
.vote-minus[href="javascript:;"]{color:#C5C5C5!important;cursor:no-drop}
.khungthank {display: block;float: left;background-color: white;width: 100%;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.songuoithank,.tennguoithank {padding: 5px;}  
.tennguoithank a:after {content: ", ";}
.tennguoithank a:last-child:after {content: "";}
.pun a {text-decoration: none;}


Bước 3:
Sau khi chép xong css các bạn hãy vào sửa tem viewtopic_body:
Các bạn tìm dòng này:

Code:

               <div class="postfoot">
                  <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
                     {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                  </div>
                  <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">
                     {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                  </div>
                  <div style="clear:both;"></div>
               </div>


Rồi sửa nó thành:

Code:

               <div class="postfoot">
                  <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
                     {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                  </div>
                  <div class="vote-Zzbaivong">
                     <!-- BEGIN switch_vote_active -->
                        <a data="{postrow.displayed.POST_URL}" class="vote-plus" href="<!-- BEGIN switch_vote -->{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}<!-- END switch_vote -->">Thích</a>
                     <!-- END switch_vote_active -->
                  </div>
                  <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">
                     {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                  </div>
                  <div style="clear:both;"></div>
               </div>


Bước 4:
Tìm dòng này:

Code:

         </div>
         <!-- BEGIN first_post_br -->

Và sửa nó thành:

Code:

                          <div class="khungthank"><div class="songuoithank"><b>Có tất cả <b class="numberthank">0</b> thành viên đã thank {postrow.displayed.POSTER_NAME} vì bài viết hay này: </b></div>
                          <div data="{postrow.displayed.POST_URL}" class="tennguoithank"></div></div>
         </div>
         <!-- BEGIN first_post_br -->


Bước 5: 
Sau khi sửa xong kéo đến cuối tem thêm vào đoạn script này:

Code:

<script type="text/javascript">
   //<![CDATA[
      setInterval(function(){$('.khungthank').each(function(){$(this).find('.numberthank').text(''+$(this).find('.tennguoithank a').length+'')})}, 50);
   $('.tennguoithank').each(function(){var linkthank = $(this).attr('data').replace('#','').split('-');$(this).load('http://viethoagame.16mb.com/dulieuthank.php #'+linkthank[1]+'')});
   $(".vote-Zzbaivong").each(function() {
      var b = $(this);
      if (b.is(":empty")) b.html('<a class="vote-plus" href="">Th\u00edch</a>');
      else {
         var a = b.find(".vote-tip").val(),
            c;
         /Message\sreputation\s:/.test(a) ? (c = a.split(/\W/), a = Math.round(parseInt(c[4], 10) / 100 * parseInt(c[7], 10)), c = parseInt(c[7], 10) - a) : a = c = 0;
         b.find(".plus-time").text(a);
         b.find(".minus-time").text(c)
      }
   });
   $(".vote-plus, .vote-minus").one("click", function(b) {
      b.preventDefault();
      var idthank = $(this).attr('data').replace('#','').split('-');
      var dulieuthank = '<a href="/u'+_userdata['user_id']+'" id="'+idthank[1]+'">'+_userdata['username']+' ('+new Date().toJSON().slice(0,10)+')</a>';
      var $data = 'd=' + escape(''+dulieuthank+'');$.ajax({url:"http://viethoagame.16mb.com/luudulieu.php",type:"post",dataType:"html",data:$data});
      $(this).closest('.post').find(".numberthank").text(function() {return parseInt($(this).text(), 10) + 1});
      $(this).closest('.post').find('.tennguoithank').append(''+dulieuthank+'');
      var a = $(this);
      b = a.attr("href");
      /us\&p_vote\=/.test(this.href) && (a.parent().children(".vote-plus, .vote-minus").attr("href", "javascript:;"), a.next(".vote-time").text(function() {
         return parseInt($(this).text(), 10) + 1
      }), a.parent().find(".vote-plus").css("background-image", "url(http://i57.servimg.com/u/f57/17/05/17/70/preloa10.gif)"), $.get(b, function() {
         a.parent().children(".vote-plus").removeAttr("style")
      }));
   $(this).parent().fadeOut(2000);
   });
$(".vote-Zzbaivong > a[href='']").replaceWith('<a class="vote-plus" href="javascript:;">Thích</a>');
   //]]>
</script>


Trong đoạn script đó các bạn sửa các đường link http://viethoagame.16mb.com/ thành link host mà ở bước 1 mình đã hướng dẫn các bạn lấy. Vậy là xong rồi rồi đấy. Rất đơn giản đúng không nào.
P/s: Cách làm này theo mình thấy là rất nhanh và đơn giản. Thời gian load cũng rất mau. Mình đã test thử và nó load hơn 100 tên thành viên cũng nhanh như thường. Nếu ai sợ thì cũng có thể giới hạn số bài trong view khoảng từ 5 - 10 post thôi cũng được.
Mình không rành js lắm và đây cũng không phải sở trường của mình. Nhưng do lòng học hỏi và tìm tòi mình cuối cùng cũng làm được. Hi vọng các bạn cũng làm được.


Lưu ý rằng code trên dùng cho punbb mặc định chưa chỉnh sửa gì hết. Nếu ai đã sửa template rồi thì có thể dựa theo code trên để tùy chỉnh cho thích hợp.

Đã test! Hàng ngon đấy <(")

Đặt gạch hóng

CSS bị trùng với nút vote của BaiVong, liệu có cần lưu ý gì về điều này?

hàng rất ok ạ

Mod tốt, nhưng chưa tối ưu, cần phát triển thêm.

làm sao để có màu nick của ng` thanks vậy anh

Dùng Text Shadow . Chỉnh trong CSS

anh chỉ cụ thể chút ạ

anhdausai wrote:

Code:

span[style="color:#FF0000"] strong { color: white;}
span[style="color:#FF0000"] {text-shadow: 0 0 0.3em #FF0000, 0 0 0.4em #FF0000, 0 0 0.5em #FF0000;color: #FF0000;}

hoặc dùng group đó bạn
VD: tạo group "Thành viên mới" chọn mã màu cho group là mã màu đỏ FF0000 rồi chọn Auto Subcribe chọn có rồi điền bài viết là 0 thì ai mới lập nick xong nó cũng vào group đó và tên sẽ có màu đỏ

ý mình là lúc thành viên thanks bài viết xong thì có hiện thêm màu nick có sẵn á bạn

Bác ơi sao em làm xong rồi nút like bị cấm không cho bấm ợ- tạo nik mới vào bấm củng ko đc - đưa chuột vào lại hiện ô tròn gạch chéo ?