[TUTs] Thống kê bài viết 3 cột

  Bài viết hay nhất1

Thống kê bài viết 3 cột



Chức năng


Thống kê bài viết, với 3 cột thông tin:

  1. Danh sách bài viết mới
  2. 10 bài viết được xem nhiều nhất
  3. 10 bài viết trả lời nhiều nhất

Chú ý: Hướng dẫn này dành cho punBB


Demo



Thống kê bài viết 3 cột


Hướng dẫn


Bước 1

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Thêm vào CSS:
Code:
/* Latest topics */
#left,#left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#content-container div#container{float:none}
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left td{border-width:0 1px;width:25%;vertical-align:top}
#left th{width:25%;vertical-align:middle}
#left .double{border-left:0;width:50%}
#left th.double{padding:0 12px;text-align:left}
#left ul,#left th{padding:10px 10px 10px 30px;margin:0}
#left ul{max-height:210px;overflow:auto}
#left li{counter-increment:Zzindex;height:19px;line-height:19px;position:relative;width:100%;list-style-type:none}
#left li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:1px;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
#left li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:6px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#FD5405}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#FDB55A}
#left li:nth-child(3) ~ li:before,#left li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:60%;left:0;top:0}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a{width:80%}
#left .lastRight{right:0;text-align:right;position:absolute;top:0;left:auto;width:100px!important}
/* Tooltip */
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}

Bước 2

ACP >> Display >> QLTT

over_header: Tìm và xóa đoạn sau
Code:
<div id="{ID_LEFT}">
        <!-- BEGIN giefmod_index1 -->
        {giefmod_index1.MODVAR}
        <!-- BEGIN saut -->
        <div style="height:{SPACE_ROW}px"></div>
        <!-- END saut -->
        <!-- END giefmod_index1 -->
</div>

index_body: Tìm
Code:
{CHATBOX_TOP}
...và thêm vào trước nó:
Code:
<div id="{ID_LEFT}" class="main">
  <div class="main-head">
      <div class="page-title">
        <h2>Thống kê bài viết</h2>
      </div>
  </div>
  <div class="main-content">
      <table cellspacing="0" class="table">
        <tbody class="statused">           
            <tr>             
              <!-- BEGIN giefmod_index1 -->
              {giefmod_index1.MODVAR}                               
              <!-- END giefmod_index1 -->
            </tr>
        </tbody>
      </table>
  </div> 
  <script type="text/javascript">
      //<![CDATA[         
      var versionMinor = parseFloat(navigator.appVersion),
      versionMajor = parseInt(versionMinor),
      IE = document.all && !window.opera && 7 > versionMajor,
      IE7 = document.all && !window.opera && 7 <= versionMajor,
      OP = window.opera,
      FF = document.getElementById,
      NS = document.layers;
      function get_item(a, c) {       
        if (IE) return c ? window.opener.document.all[a] : document.all[a];       
        if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);       
        if (NS) return c ? window.opener.document.layers[a] : document.layers[a]   
      }         
      var current_tooltip;
      function show_tooltip(a, c) {       
        var b = get_item("tooltip");       
        b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));       
        b.style.zIndex = 1000;       
        b.style.position = "absolute";       
        b.innerHTML = "<p>" + c + "</p>";       
        b.style.visibility = "visible";       
        a.onmousemove = move_tooltip;       
        a.onmouseout = function() {           
            b.style.visibility = "hidden"       
        };       
        a.title = ""   
      }   
      var offsetxpoint = -60,
      offsetypoint = 20,
      real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
      real_body = document.documentElement ? document.documentElement : document.body;
      function move_tooltip(a) {       
        var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
        d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
        b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
        e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
        f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;       
        current_tooltip = get_item("tooltip");       
        current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";       
        current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"   
      }   
      $("#recent_topics li a:first-child").mouseover(function() {       
        show_tooltip(this, $(this).next().html())   
      });   
      $("#active_topics a, #viewed_topics a").mouseover(function() {       
        show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));   
      }).after(function() {       
        return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'   
      });    //]]>
  </script>
</div>

Bước 3

ACP >> Display >> Portal

Thay thế toàn bộ các template sau:

mod_recent_topics:
Code:
<!-- BEGIN classical_row -->
<!-- <tr> -->
  <th class="double">
      <h2>Bài viết mới
        <span class="right">Người gửi cuối</span>
      </h2>
  </th>
  <th>
      <h2>Trả lời nhiều nhất</h2>
  </th>
  <th>
      <h2>Lượt xem nhiều nhất</h2>
  </th>
</tr>
<tr>
  <td class="double">
      <ul id="recent_topics">
        <!-- BEGIN recent_topic_row -->
        <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
            <div class="tooltip_data" style="display:none">
              <p>
                  <span style="color:red">Tiêu đề</span>: {classical_row.recent_topic_row.L_TITLE}
              </p>
              <p>
                  <span style="color:blue">Gửi lúc</span>: {classical_row.recent_topic_row.S_POSTTIME}                                       
              </p>
            </div>
            <!-- BEGIN switch_poster -->
            <a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
            <!-- END switch_poster -->
            <!-- BEGIN switch_poster_guest -->
            <span class="lastRight">
              {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}                               
            </span>
            <!-- END switch_poster_guest -->
        </li>
        <!-- END recent_topic_row -->
      </ul>
  </td>
<!-- </tr> -->
<!-- END classical_row -->

mod_most_active_topics:
Code:
<td>
   <ul id="active_topics" class="half">
      <!-- BEGIN TOPIC -->
      <li>
         <span style="display:none">{TOPIC.TITLE}</span>
         <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
      </li>
      <!-- END TOPIC -->
   </ul>
</td>

mod_most_viewed_topics
Code:
<!--<tr>-->
  <td>
      <ul id="viewed_topics" class="half">     
      <!-- BEGIN TOPIC -->     
        <li>       
            <span style="display:none">{TOPIC.TITLE}</span>       
            <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
        </li>     
      <!-- END TOPIC -->
      </ul>
  </td>
</tr>

Bước 4

ACP >> Modules >> Portal & Widgets >> Forum widgets management


Kích hoạt cột widget trái


Xắp xếp widget theo thứ tự


Tùy chỉnh recent topics


Nguồn


Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất2
chưa có hướng dẫn cụ thể ah admin
  Bài viết hay nhất3
Hướng dẫn tý ir adm ui
  Bài viết hay nhất4
Đã cập nhật #1
The author of this message was banned from the forum - See the message
  Bài viết hay nhất6
' '~ Đệp thế ' '~ Để khênh về xài ' '~
  Bài viết hay nhất7
you can see the live demo here http://www.bdtipsntricks.com/
  Bài viết hay nhất8
Thừa đoạn này trong css
Code:
#tooltip .statusAva{margin:0}
  Bài viết hay nhất9


Sao của mình chỉ có :



Kết quả là ko hiện gì ở trang chủ cả , dù mình đã làm đúng chỉ dẫn của Zzbaivong
  Bài viết hay nhất10
Code này viết cho punBB nên nếu dùng cho phiên bản khác phải sửa CSS vài chỗ.
Nếu bạn dùng punBB thì thử làm lại hướng dẫn vì mình vừa sửa lại chút.
Phần chỉnh Recent topics hơi khác chút do Forumotion mới cập nhật gần đầy, tuy nhiên nó cũng không ảnh hưởng gì.
  Bài viết hay nhất11
Cám ơn ad mình đã làm được rồi nhưng mình ko biết code nên nãy sửa ko đc. Có vài cái mong ad chỉ giúp mình



1/Chả là mình muốn khoảng cách của 3 cột thống kê : Bài mới , xem nhiều , trả lời nhiều bằng nhau thì điều chỉnh ở đoạn nào ?

2/ Mình muốn bỏ đoạn người gửi ở cột bài mới

3/ Bỏ luôn khung chú thích " tiêu đề , gửi lúc " khi rê chuột và tiêu đề bài viết

Cám ơn ad
  Bài viết hay nhất12

@quynhlt57 wrote:Cám ơn ad mình đã làm được rồi nhưng mình ko biết code nên nãy sửa ko đc. Có vài cái mong ad chỉ giúp mình



1/Chả là mình muốn khoảng cách của 3 cột thống kê : Bài mới , xem nhiều , trả lời nhiều bằng nhau thì điều chỉnh ở đoạn nào ?

2/ Mình muốn bỏ đoạn người gửi ở cột bài mới

3/ Bỏ luôn khung chú thích " tiêu đề , gửi lúc " khi rê chuột và tiêu đề bài viết

Cám ơn ad

CSS:
Code:
/* Latest topics */
#left,#left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#content-container div#container{float:none}
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left td{border-width:0 1px;vertical-align:top}
#left th{vertical-align:middle}
#left .double{border-left:0}
#left ul,#left th{padding:10px 10px 10px 30px;margin:0}
#left ul{max-height:210px;overflow:auto}
#left li{counter-increment:Zzindex;height:19px;line-height:19px;position:relative;width:100%;list-style-type:none}
#left li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:1px;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
#left li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:6px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#FD5405}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#FDB55A}
#left li:nth-child(3) ~ li:before,#left li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:60%;left:0;top:0}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a{width:100%}
#left .lastRight{right:0;text-align:right;position:absolute;top:0;left:auto;width:100px!important}

index_body
Code:
<div id="{ID_LEFT}" class="main">
  <div class="main-head">
      <div class="page-title">
        <h2>Thống kê bài viết</h2>
      </div>
  </div>
  <div class="main-content">
      <table cellspacing="0" class="table">
        <tbody class="statused">           
            <tr>             
              <!-- BEGIN giefmod_index1 -->
              {giefmod_index1.MODVAR}                               
              <!-- END giefmod_index1 -->
            </tr>
        </tbody>
      </table>
  </div> 
  <script type="text/javascript">
      //<![CDATA[
      $("#active_topics a, #viewed_topics a").after(function() {       
        return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'   
      });    //]]>
  </script>
</div>

mod_most_active_topics
Code:
<td>
  <ul id="active_topics" class="half">
      <!-- BEGIN TOPIC -->
      <li>
        <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
      </li>
      <!-- END TOPIC -->
  </ul>
</td>

mod_most_viewed_topics
Code:
<!--<tr>-->
  <td>
      <ul id="viewed_topics" class="half">     
      <!-- BEGIN TOPIC -->     
        <li>
            <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
        </li>     
      <!-- END TOPIC -->
      </ul>
  </td>
</tr>

mod_recent_topics
Code:
<!-- BEGIN classical_row -->
<!-- <tr> -->
  <th class="double">
      <h2>Bài viết mới</h2>
  </th>
  <th>
      <h2>Trả lời nhiều nhất</h2>
  </th>
  <th>
      <h2>Lượt xem nhiều nhất</h2>
  </th>
</tr>
<tr>
  <td class="double">
      <ul id="recent_topics">
        <!-- BEGIN recent_topic_row -->
        <li>
            <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
        </li>
        <!-- END recent_topic_row -->
      </ul>
  </td>
<!-- </tr> -->
<!-- END classical_row -->
  Bài viết hay nhất13
Ad ơi , nhưng mình chỉ muốn giới hạn từ 5 > 10 bài viết thôi . Hiện giờ khi dài quá nó lại hiện thanh cuộn ( nhìn ko thích lắm ) , điều chỉnh thông số giới hạn chủ đề ở đâu vậy ad ? Cám ơn
  Bài viết hay nhất14


Number of recent topics: 10
  Bài viết hay nhất15
mình cũng bị lỗi giống bạn 2quynhlt57 mình cũng đã chuyển giao diện giống admin sao làm hoài ko có được
  Bài viết hay nhất16
Hi,
Though how beautiful it is, I need to be disentangled.

1. Can it be moved to right side of the forum?
(I think probably it cannot show up both on the top of the category list and on the right side )
2. How to add profile pictures in front of each topic on each line?

I could not find any solution after all that time so this is my decision to post questions.
Thank you very much,
My regard.
  Bài viết hay nhất17
Nếu đang dùng invision thì phải sửa những chỗ nào vậy bác?
You cannot reply to topics in this forum