[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ất126
^^ dạ vâng, nếu như làm thế thì mình phải thu nhỏ mấy cái temp như viewed_topic lại rồi thêm vào đúng không ạ :))
  Bài viết hay nhất127
tại sao đến đoạn đoạn Tùy chỉnh recent topics thì bảng điều khiển của mình lại như thế này nhỉ
  Bài viết hay nhất128
@hoang02hp thì sửa lại cho đúng mẫu, có mỗi thế cũng hỏi -_-
  Bài viết hay nhất129

@anhoang_qn wrote:@hoang02hp thì sửa lại cho đúng mẫu, có mỗi thế cũng hỏi -_-

khác nhau một trời một vực mà
  Bài viết hay nhất130
khác mỗi cái dòng scrolling progression mà bảo là 1 trời 1 vực à, trừ cái đó ra còn lại điền giống hệt đi, khi nào chạy mà báo lỗi hay k hiện thì hẳn lên đây than, cái vấn đề khác dòng cuối này cũng có 1 đứa hỏi r, cũng nói r, k chịu đọc cmt r la rầy -_-

vấn đề tương tự (lăn lên vài cmt là thấy ngay)
@ChauLe3 đã hỏi : 123
Đã tl : 125
  Bài viết hay nhất131
e làm nhưng mà nó hiện ra như thế này anh vong ơi
http://eng-lite-math.forumvi.com/ (em hẻm có photoshop)
e làm có 2 cột thui nên mong anh giúp e nó trên 1 dòng
  Bài viết hay nhất132
cho mình hỏi tại sao cái thống kê của mình nó mờ thế >_<
http://eng-lite-math-ict.forumvi.com/
  Bài viết hay nhất133
chưa có CSS hoặc sai phiên bản (trên ảnh là ver PunBB)
  Bài viết hay nhất134
cái này là punbb hả bạn, mình đang dùng invision, thoy kệ, để vậy cũng được nhòi, ko cần lôi thôi :x
  Bài viết hay nhất135
mình ko làm thống kê năm cột, vì xài skin g+ nhưng mình muốn add thêm cái lượt views trong danh sách bài viết xem nhiều nhất, xin hỏi mình phải lấy code nào để dùng trong mấy mớ code trên ???
  Bài viết hay nhất136
giờ muốn có cũng phải sửa nhiều thứ lắm còn không thì search thống kê bài viết 3 cột đó (xóa last cũ) cũng được
  Bài viết hay nhất137
Mình đã chỉnh sửa toàn bộ chi tiết y như baivong nói mà sao nó lại bị thế này



Demo: http://studymore.forumvi.com (Punbb)

Làm sao để sửa cái thống kê bài viết này thành như cái trong hình của baivong được
  Bài viết hay nhất138
@kingforgame Xắp xếp widget chưa vậy
  Bài viết hay nhất139
hình như bạn thiếu temp hoặc add widget sai
chứ mình làm ngon lành mà
  Bài viết hay nhất140
chưa add temp và widget thì nó hiện ra thế nhờ phép màu hả? Có thể là xếp widget thiếu hoặc sai thôi
  Bài viết hay nhất141
mình làm widget y hệt mà, temp cũng đã thay hết theo đúng lời baivong, css cũng đã thêm, recent topic cũng đã sửa, và mình cũng ko vọc cái khác, làm ơn giúp mình với




  Bài viết hay nhất142
xem lại các temp xem có đúng hết không
  Bài viết hay nhất143
Không sai một tí nào bạn ạ, mà sao nó lại bị thế nhỉ
  Bài viết hay nhất144
hay là thử xóa hết temp rồi làm lại từ đầu đi linh
  Bài viết hay nhất145
Mình thử chục lần rồi T_T
  Bài viết hay nhất146
Hiện tại mình đã làm cẩn thận các bước nhưng không hiểu sao các dòng nó lại hiện như thế này.
  Bài viết hay nhất147
Punbb 3 chứ ko phải phphh 3

bạn đã làm widget chưa, sửa recent topic chưa, add css chưa
  Bài viết hay nhất148
PunBB có PunBB3 à?
  Bài viết hay nhất149
@loving9you: 1. bạn chưa dán temp
2. bạn đã dán temp rồi nhưng chưa published nó

nếu bạn làm bằng phpbb3 thì ít nhất nó cũng hiện được 5 cột, chứ ko phải như thế kia, nhìn fm mình này http://eng-lovepeoplefamily.forumvi.com/, mình xài invision, cái 5 cột của mình nhìn ngon lành, chỉ có cái chữ hơi to và ko hiện nền trắng thôi

@kingofgame: làm gì có punbb3 -_-
  Bài viết hay nhất150

@DucMinh2003 wrote:@loving9you: 1. bạn chưa dán temp
2. bạn đã dán temp rồi nhưng chưa published nó

nếu bạn làm bằng phpbb3 thì ít nhất nó cũng hiện được 5 cột, chứ ko phải như thế kia, nhìn fm mình này http://eng-lovepeoplefamily.forumvi.com/, mình xài invision, cái 5 cột của mình nhìn ngon lành, chỉ có cái chữ hơi to và ko hiện nền trắng thôi

@kingofgame: làm gì có punbb3 -_-

Hiện đang gặp rắc rối bác rãnh thì giúp mình qua Tea Viewer được không ?
You cannot reply to topics in this forum