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

  Bài viết hay nhất1
First topic message reminder :

Hướng dẫn này giúp bạn tạo một bảng thống kê bài viết gọn gàng ở đầu trang chủ, với 5 cột 7 thông tin.

Chức năng



  • Hỗ trợ responsive.
  • 12 bài viết mới nhất.
  • 5 chủ đề được xem nhiều nhất.
  • 5 chủ đề thảo luận nhiều nhất.
  • 5 thành viên tạo chủ đề nhiều nhất.
  • 5 thành viên gửi bài nhiều nhất.
  • 5 thành viên gửi bài nhiều nhất tuần.
  • 5 thành viên gửi bài nhiều nhất tháng.


Screenshot



Hiển thị trên Desktop

Mobile và Tablet:

Hiển thị trên Mobile


Hiển thị trên Tablet

Hướng dẫn


Hướng dẫn này dành cho phiên bản PunBB, các phiên bản khác sẽ được cập nhật sau.

Bước 1


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

CSS


Thêm vào cuối:
Code:
/* Latest Topics Board */
#left .lastRight,#left td,#left th{display:none}
#left td,#left th{padding:1em;border:0}
#left td.double{display:table-cell;border-bottom:0 none!important}
#content-container div#left{width:100%;float:none}
.olList{padding-left:2em!important;list-style:none}
.olList li{position:relative;height:2.5em;border-bottom:1px dashed #e7e7e7;line-height:2.5em;counter-increment:zzindex}
.olList li a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:none}
.hide{display:none}
.olList li:before{border-radius:3px;text-align:center;content:counter(zzindex);position:absolute;top:.9em;left:-2.5em;width:1.6em;height:1.5em;font-size:.8em;line-height:1.5em;color:#fff}
.olList li:after{content:" ";position:absolute;top:1em;left:-.8em;border-width:4px 0 4px 4px;border-style:solid;border-color:transparent transparent transparent #ebebeb}
.olList li:nth-child(1):before{background:red}
.olList li:nth-child(1):after{border-left-color:red}
.olList li:nth-child(2):before{background:#fd5405}
.olList li:nth-child(2):after{border-left-color:#fd5405}
.olList li:nth-child(3):before{background:#fdb55a}
.olList li:nth-child(3):after{border-left-color:#fdb55a}
.olList li:nth-child(3)~li:before{background:#ebebeb;color:#ec4403;text-shadow:0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff}
@media only screen and (min-width: 480px) {
.olList li{height:2em;line-height:2em}
.olList li:before{top:.45em}
.olList li:after{top:.65em}
.olList li a:first-child{width:80%}
#left .lastRight{display:block;position:absolute;top:0;right:0}
}
@media only screen and (min-width: 768px) {
#left td,#left th{display:table-cell;width:25%;border-style:solid;border-color:#ddd;vertical-align:top}
#left td.double,#left th.double{width:50%;text-align:left}
#left td:last-child,#left th:last-child{border-left-width:1px}
#left th{padding-top:.5em;padding-bottom:.5em;border-bottom-width:1px;vertical-align:middle}
#left .double{border-right-width:1px}
#left .topicLast{border-top-width:1px}
#left .changeLast{height:1.4em;padding:0;border:0;background:0 0;box-shadow:none;color:inherit}
#left .changeLast option{padding:1px 7px}
#left #active_starters,#left #users_month,#left .half li:nth-child(5)~li{display:none}
#left .half{height:10em}
#tooltip{border:1px solid #e7e7e7;border-radius:3px;position:fixed;z-index:888;min-width:170px;max-width:280px;padding:8px 15px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.24)}
#tooltip span{margin-right:.4em}
}

Bước 2


ACP >> Display >> QLTT

overall_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>Latest topics</h2>
        </div>
    </div>
    <div class="main-content">
        <table cellspacing="0" class="table">
            <tbody class="statused">
                <!-- BEGIN giefmod_index1 -->
                {giefmod_index1.MODVAR}
                <!-- END giefmod_index1 -->
            </tbody>
        </table>
    </div>
</div>
<script>
/* Latest Topics Board */
(function($) {
    'use strict';

    var current_tooltip;

    function show_tooltip(element, content) {
        current_tooltip = document.getElementById('tooltip');

        if (!current_tooltip) {
            current_tooltip = document.createElement('div');
            current_tooltip.setAttribute('id', 'tooltip');
            document.body.appendChild(current_tooltip);
        }

        current_tooltip.style.visibility = 'visible';

        element.title = '';
        element.onmousemove = function(event) {
            var xMouse = event.clientX,
                yMouse = event.clientY,
                wWidth = window.innerWidth,
                wHeight = window.innerHeight,
                tWidth = current_tooltip.offsetWidth,
                tHeight = current_tooltip.offsetHeight,
                yOffset = -(20 + tHeight),
                xOffset = 0;

            if (current_tooltip.innerHTML !== content) current_tooltip.innerHTML = content;
            if (current_tooltip.style.visibility !== 'visible') current_tooltip.style.visibility = 'visible';

            if (xMouse + tWidth + 50 > wWidth) xOffset = -(tWidth);
            if (xMouse + xOffset < 0) xOffset = -xMouse;
            current_tooltip.style.left = xMouse + xOffset + 'px';

            if (yMouse < tHeight + 20) yOffset = 30;
            if (yMouse + yOffset + tHeight > wHeight) yOffset = -yMouse + (wHeight - tHeight - 18);
            current_tooltip.style.top = yMouse + yOffset + 'px';
        };

        element.onmouseout = function() {
            current_tooltip.style.visibility = 'hidden';
        };
    }


    $('.sub-title').replaceWith(function() {
        return this.textContent.replace(/^(.+)\s-\s(\d+)\s[^-]+$/, '<span class="hide"><span class="tooltip-title">$1</span></span><span class="lastRight">$2</span>');
    });

    $('.group_post .lastRight, .group_time .lastRight').text(function() {
        return this.textContent.match(/\d+/)[0];
    });

    $('#recent_topics a:first-child, #active_topics a, #viewed_topics a').mouseover(function() {
        show_tooltip(this, this.nextElementSibling.innerHTML);
    });

    $('.changeLast').change(function() {
        $('.half.group_' + this.dataset.group).hide();
        $('#' + this.value).show();
    });

})(jQuery);
</script>

Bước 3


ACP >> Display >> Portal

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

mod_most_active_starters

Code:
<!--<td>-->
    <ol id="active_starters" class="olList half group_post">
        <!-- BEGIN POSTER -->
        <li>
            {POSTER.NAME}
            <span class="lastRight">
                {POSTER.NB_TOPICS}
            </span>
        </li>
        <!-- END POSTER -->
    </ol>
</td>

mod_most_active_topics

Code:
<tr>
    <th class="topicLast centered">
        Most active topics
    </th>
    <th class="topicLast centered">
        Most Viewed Topics
    </th>
</tr>
<tr>
    <td>
        <ol id="active_topics" class="olList half">
            <!-- BEGIN TOPIC -->
            <li>
                <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
                <span class="sub-title hide">{TOPIC.TITLE}</span>
            </li>
            <!-- END TOPIC -->
        </ol>
    </td>
<!--</tr>-->

mod_most_viewed_topics

Code:
<!--<tr>-->
  <td>
        <ol id="viewed_topics" class="olList half">
            <!-- BEGIN TOPIC -->
            <li>
                <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
                <span class="sub-title hide">{TOPIC.TITLE}</span>
            </li>
            <!-- END TOPIC -->
        </ol>
    </td>
</tr>

mod_recent_topics

Code:
<!-- BEGIN classical_row -->
<tr>
    <th class="double">
        Newest post
        <span class="right">Latest reply</span>
    </th>
    <th class="centered">
        <select class="changeLast" data-group="post">
            <option value="top_posters">Top posters</option>
            <option value="active_starters">Most active topic starters</option>
        </select>
    </th>
    <th class="centered">
        <select class="changeLast" data-group="time">
            <option value="users_week">Top posting users this week</option>
            <option value="users_month">Top posting users this month</option>
        </select>
    </th>
</tr>
<tr>
    <td class="double" rowspan="3">
        <ol id="recent_topics" class="olList">
            <!-- 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 hide">
                    <div>
                        <span class="tooltip-title">{classical_row.recent_topic_row.L_TITLE}</span>
                    </div>
                    <div>
                        <small class="tooltip-date">{classical_row.recent_topic_row.S_POSTTIME}</small>
                    </div>
                </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 -->
        </ol>
    </td>
<!-- </tr> -->
<!-- END classical_row -->

mod_top_post_users_month

Code:
<!--<tr>-->
    <!--<td>-->
      <ol id="users_month" class="olList half group_time">
            <!-- BEGIN POSTER -->
            <li>
                {POSTER.NAME}
                <span class="lastRight">
              {POSTER.NB_POSTS}
            </span>
            </li>
            <!-- END POSTER -->
        </ol>
    </td>
</tr>

mod_top_post_users_week

Code:
<td>
    <ol id="users_week" class="olList half group_time">
        <!-- BEGIN POSTER -->
        <li>
            {POSTER.NAME}
            <span class="lastRight">
            {POSTER.NB_POSTS}
        </span>
        </li>
        <!-- END POSTER -->
    </ol>
<!--</td>-->

mod_top_posters

Code:
<td>
    <ol id="top_posters" class="olList half group_post">
        <!-- BEGIN POSTER -->
        <li>
            {POSTER.NAME}
            <span class="lastRight">
            {POSTER.NB_POSTS}
        </span>
        </li>
        <!-- END POSTER -->
    </ol>
<!--</td>-->

Bước 4


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


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


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


Tùy chỉnh Recent topics


Tùy chỉnh Top posters

Nguồn


Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất151
@DucMinh2003 thêm vào css
Code:
#content-container div#left{background: #fff}
  Bài viết hay nhất152
a, vậy là có code nhòi, cảm ơn anh abc đã giải đáp ^^

@loving9you: bạn thử cài lại hết temp đi, nhớ là sau khi cài thì nhớ bấm dấu + thì nó mới có tác dụng nhé
  Bài viết hay nhất153

DucMinh2003 wrote:a, vậy là có code nhòi, cảm ơn anh abc đã giải đáp ^^

@loving9you: bạn thử cài lại hết temp đi, nhớ là sau khi cài thì nhớ bấm dấu + thì nó mới có tác dụng nhé

Cám ơn bạn được rồi vì đúng như bạn đoán chưa nhấn dấu + , mà khi mình làm xong nó bị lỗi như sau

AD hay bạn nào biết cách sửa lại cái số nó tràn ra ngoài như vậy , làm ơn giúp cho mọi thứ của em thật hoàn hảo ?

  Bài viết hay nhất154
Hiện tại đã mò ra cách sửa được , Thanks tất cả .
  Bài viết hay nhất155
Có ai biết cách sửa đoạn Code chỗ nào mà chuyển Bảng Thống Kê Bài Viết - Bài Viết Mới qua bên phải không ạ , còn 4 bảng nhỏ kia thì chuyển qua bên trái . Em thấy như vậy nó hợp lý hơn . Còn dòng Viết Bài Nhiều Nhất em muốn đổi chứ " Số bài " thành chữ " Bài " như vậy nó hợp với ngữ cảnh và nội dung hơn anh AD hay ai biết giúp giùm em đi nhé .
  Bài viết hay nhất156
Tình hình là fm mình bị lỗi cái là cái thống kê nó hiện 2 bảng, một bảng ở trên list nhạc, 1 bảng ở dưới list nhạc, fm mình đây http://eng-lovepeoplefamily.bestforumpro.com/,
acctest: nicktest
pass: nicktestofelpf
  Bài viết hay nhất157

DucMinh2003 wrote:Tình hình là fm mình bị lỗi cái là cái thống kê nó hiện 2 bảng, một bảng ở trên list nhạc, 1 bảng ở dưới list nhạc, fm mình đây http://eng-lovepeoplefamily.bestforumpro.com/,
acctest: nicktest
pass: nicktestofelpf

Chắc lỗi Css bạn xem có cài chồng Css không ?
  Bài viết hay nhất158

loving9you wrote:
DucMinh2003 wrote:Tình hình là fm mình bị lỗi cái là cái thống kê nó hiện 2 bảng, một bảng ở trên list nhạc, 1 bảng ở dưới list nhạc, fm mình đây http://eng-lovepeoplefamily.bestforumpro.com/,
acctest: nicktest
pass: nicktestofelpf

Chắc lỗi Css bạn xem có cài chồng Css không ?
ko bạn ạ :(
  Bài viết hay nhất159

DucMinh2003 wrote:
loving9you wrote:
DucMinh2003 wrote:Tình hình là fm mình bị lỗi cái là cái thống kê nó hiện 2 bảng, một bảng ở trên list nhạc, 1 bảng ở dưới list nhạc, fm mình đây http://eng-lovepeoplefamily.bestforumpro.com/,
acctest: nicktest
pass: nicktestofelpf

Chắc lỗi Css bạn xem có cài chồng Css không ?
ko bạn ạ :(

Vào overall_header tìm:
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>

Xóa nó đi. Ở trên có hướng dẫn rồi. Không xem kỹ lỗi là phải.

Góp ý chút nhé.
1. Forum cài toàn ảnh động. Vừa xấu, lag. lại chẳng có tác dụng gì. Khiến người khác nhìn chỉ thấy rối mắt thêm.
2. Cái chatbox nên để thành viên mới cho hiện. Vì khách chẳng xem được chatbox đâu sẽ khiến lỗi và làm chậm forum thêm.
  Bài viết hay nhất160

markai30 wrote:
DucMinh2003 wrote:
loving9you wrote:
DucMinh2003 wrote:Tình hình là fm mình bị lỗi cái là cái thống kê nó hiện 2 bảng, một bảng ở trên list nhạc, 1 bảng ở dưới list nhạc, fm mình đây http://eng-lovepeoplefamily.bestforumpro.com/,
acctest: nicktest
pass: nicktestofelpf

Chắc lỗi Css bạn xem có cài chồng Css không ?
ko bạn ạ :(

Vào overall_header tìm:
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>

Xóa nó đi. Ở trên có hướng dẫn rồi. Không xem kỹ lỗi là phải.

Góp ý chút nhé.
1. Forum cài toàn ảnh động. Vừa xấu, lag. lại chẳng có tác dụng gì. Khiến người khác nhìn chỉ thấy rối mắt thêm.
2. Cái chatbox nên để thành viên mới cho hiện. Vì khách chẳng xem được chatbox đâu sẽ khiến lỗi và làm chậm forum thêm.
ồ, mình làm được rồi, cảm ơn vì đã sửa và góp ý cho fm mình nhé
  Bài viết hay nhất161
Ai giúp mình bỏ cột Lượt Xem + Trả lời với :D
  Bài viết hay nhất162

kuzu_mtp wrote:Ai giúp mình bỏ cột Lượt Xem + Trả lời với :D
Bạn có thể thử sử dụng thống kê bài viết ba cột :))
  Bài viết hay nhất163
cái này invision chạy được ko nhỉ
  Bài viết hay nhất164
Không được nha bác, template của Inv và Pun khác nhau hoàn toàn nhé
  Bài viết hay nhất165
Nó chỉ khác 1 chút về khung bao quanh ở index_body, các temp khác sử dụng bình thường.
  Bài viết hay nhất166

kingofgame wrote:cái này invision chạy được ko nhỉ
Dùng được mọi ver
  Bài viết hay nhất167

kuzu_mtp wrote:
kingofgame wrote:cái này invision chạy được ko nhỉ
Dùng được mọi ver
Xem lại các post ở trên đi
  Bài viết hay nhất168
Sao nó bị lệch sang một bên nhỉ @@

http://duolingo.forumvi.com/
  Bài viết hay nhất169
Có thể bạn chưa chèn CSS nên Latest Topic mới bị lệch đấy
  Bài viết hay nhất170

edogwaconan2005 wrote:Sao nó bị lệch sang một bên nhỉ @@

http://duolingo.forumvi.com/

  Bài viết hay nhất171
mình làm theo hướng dẫn nhưng bỏ bớt vài widget không dùng nó bị lỗi css mất khung viền border
ai check hộ lỗi dùm mình với, cảm ơn!

http://luat5c.forumvi.com/
  Bài viết hay nhất172
ai giúp e với ạ lỗi nó nkư tkế này



Đề Mô: http://fgamethu.clubme.net/
  Bài viết hay nhất173





sao mình làm theo hướng dẫn rồi sắp xếp theo hình mẫu rồi nó ra lại ra như ảnh trên ????

demo online : gnetvn.5forum.net
  Bài viết hay nhất174
@gnetvn bạn chưa add hết temp
  Bài viết hay nhất175
@Boom minh add het roi ma ???
You cannot reply to topics in this forum