[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


[TUTs] Thống kê bài viết 5 cột - Page 6 Deskto10
Hiển thị trên Desktop

Mobile và 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

[TUTs] Thống kê bài viết 5 cột - Page 6 Widget10
Kích hoạt cột widget trái

[TUTs] Thống kê bài viết 5 cột - Page 6 Widget11
Sắp xếp các widget theo thứ tự

[TUTs] Thống kê bài viết 5 cột - Page 6 Recent10
Tùy chỉnh Recent topics

[TUTs] Thống kê bài viết 5 cột - Page 6 Toppos10
Tùy chỉnh Top posters

Nguồn


Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất121
Anh ơi bước 3 có nghĩa là mình vào các temp như anh nói ,xóa hết code trong đó đi rồi copy mấy code này vào phải không ạ ?
  Bài viết hay nhất122

ChauLe3 wrote:Anh ơi bước 3 có nghĩa là mình vào các temp như anh nói ,xóa hết code trong đó đi rồi copy mấy code này vào phải không ạ ?

uh, thay thế hết mấy temp đó bằng mấy code tương ứng
  Bài viết hay nhất123
Anh ơi ở ảnh cuối bên em không hiện dòng scrolling progression . cái khung em làm cũng ko hiện đầy đủ nữa. Anh xem giúp xem em bị lỗi nào
Demo: http://studyphysics.forumvi.com/
  Bài viết hay nhất124
em nhắc chụy ròi mà hẻm nghe ^^, nếu chị muốn thì phải làm temp mặc định thôi, cái theme này có thể nói là không thêm bới gì được :3
  Bài viết hay nhất125
@ChauLe3 k cần cái dòng đó cũng k sao, mà demo thì k có cái last nào 5 cột

@Kel k phải là k thêm bớt chi được mà vì bạn k biết sửa như thế nào cho đúng thôi :)
  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ỉ [TUTs] Thống kê bài viết 5 cột - Page 6 RkUJrWI
  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à [TUTs] Thống kê bài viết 5 cột - Page 6 12-10-11 [TUTs] Thống kê bài viết 5 cột - Page 6 RkUJrWI
  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

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

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

[TUTs] Thống kê bài viết 5 cột - Page 6 F8UHFtV
[TUTs] Thống kê bài viết 5 cột - Page 6 F6IYzHj

  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
You cannot reply to topics in this forum