[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 2 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 2 Widget10
Kích hoạt cột widget trái

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

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

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

Nguồn


Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất16
mọi người xem giúp mình, sao last bị lệch vào bên trong vậy
demo: http://maikhongquen.ace.st/
  Bài viết hay nhất17
minhphong_9x wrote:mọi người xem giúp mình, sao last bị lệch vào bên trong vậy
demo: http://maikhongquen.ace.st/
do đoạn CSS này :
Code:
.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 10px 5px 5px 45px;
}
  Bài viết hay nhất18
ligerv wrote:
minhphong_9x wrote:mọi người xem giúp mình, sao last bị lệch vào bên trong vậy
demo: http://maikhongquen.ace.st/
do đoạn CSS này :
Code:
.pun table.table td {
background: none !important;
border: none;
border-top: 1px solid #CCC;
padding: 10px 5px 5px 45px;
}
Cảm ơn. Mình đã sửa css đó rồi.
  Bài viết hay nhất19
sao mình không làm được hích hỏng hết rồi
  Bài viết hay nhất20
ngocchien12 wrote:sao mình không làm được hích hỏng hết rồi
lần tới hỏng gì thì cho xem demo onl nha bạn, chứ như vầy chịu á
  Bài viết hay nhất21
em là không được đẹp như vậy mà nó ra thế nì nì ái giúp em với[TUTs] Thống kê bài viết 5 cột - Page 2 13108h11
nói thật là em tập thôi đừng ai chửi em ngu nha
  Bài viết hay nhất22
ngocchien12 wrote:em là không được đẹp như vậy mà nó ra thế nì nì ái giúp em với[TUTs] Thống kê bài viết 5 cột - Page 2 13108h11
nói thật là em tập thôi đừng ai chửi em ngu nha
đưa cái link forum bạn ấy
vs lại hình như cái này lộn xộn giống trang portal, sắp xếm wideget chưa vậy
  Bài viết hay nhất23
demon online dj
  Bài viết hay nhất24
http://newgaigoi.forumvi.com/ đây anh ơi
  Bài viết hay nhất25
sắp xếm wideget là gì vậy anh :D
  Bài viết hay nhất26
ngocchien12 wrote:sắp xếm wideget là gì vậy anh :D
xem lại bước 4 nhá, rồi add lại css nữa
  Bài viết hay nhất27
Đọc kỹ và làm từng bước, khi làm xong phải giống 100% các bước hướng dẫn, các ảnh mô tả.
  Bài viết hay nhất28
vẫn chưa được anh ạ
  Bài viết hay nhất29
Xóa làm lại từ đầu, làm ko dc thì xóa làm tiếp.
Ví dụ như các temp có copy nhầm temp nào không?
widget có xếp đúng như hình mô tả hay chưa?
https://i.servimg.com/u/f56/18/59/49/93/12-10-10.png
  Bài viết hay nhất30
[TUTs] Thống kê bài viết 5 cột - Page 2 13108h12
em chi có như thế này thôi
  Bài viết hay nhất31
ngocchien12 wrote:[TUTs] Thống kê bài viết 5 cột - Page 2 13108h12
em chi có như thế này thôi
ở dưới có 1 đống đó bạn, click chuột và lôi nó lên, cái nào k có trong miêu tả của admin thì click vào dấu "x" xóa nó đi, sắp xếp y hệt miêu tả của ad là đc
  Bài viết hay nhất32
em hiểu rồi tk anh nhé hì
đừng chửi em ngu nha :D
  Bài viết hay nhất33
Mình xin tooltip thôi
  Bài viết hay nhất34
[TUTs] Thống kê bài viết 5 cột - Page 2 339

Cho hỏi vì sao nó lại dài (như ảnh trên) như vậy? mình mò cả buổi mà chỉ làm nó ngắn dòng text chứ ko thể thu hẹp 4 cái mục nhỏ lại.
Mình đã làm lại y như cách của topic này hướng dẫn cho mọi n gười dễ sửa hộ mình

Đây là demo online: http://otaku.4forum.biz (dùng stylish add đoạn "body{ display: block; }" hộ mình, tại ko muốn ai truy cập vào 4r nên mới làm vậy. )

P/s:làm phiền mọi người quá :)

  Bài viết hay nhất35
anhdaodaica1 wrote:[TUTs] Thống kê bài viết 5 cột - Page 2 IyptOw5

Cho hỏi vì sao nó lại dài (như ảnh trên) như vậy? mình mò cả buổi mà chỉ làm nó ngắn dòng text chứ ko thể thu hẹp 4 cái mục nhỏ lại.
Mình đã làm lại y như cách của topic này hướng dẫn cho mọi n gười dễ sửa hộ mình

Đây là demo online: http://otaku.4forum.biz (dùng stylish add đoạn "body{ display: block; }" hộ mình, tại ko muốn ai truy cập vào 4r nên mới làm vậy. )

P/s:làm phiền mọi người quá :)

thứ nhất : cái ảnh demo đã die
thứ 2 : link demo vào chả thấy gì ngoài một màu trắng toát
  Bài viết hay nhất36
anhoang_qn wrote:
anhdaodaica1 wrote:[TUTs] Thống kê bài viết 5 cột - Page 2 IyptOw5

Cho hỏi vì sao nó lại dài (như ảnh trên) như vậy? mình mò cả buổi mà chỉ làm nó ngắn dòng text chứ ko thể thu hẹp 4 cái mục nhỏ lại.
Mình đã làm lại y như cách của topic này hướng dẫn cho mọi n gười dễ sửa hộ mình

Đây là demo online: http://otaku.4forum.biz (dùng stylish add đoạn "body{ display: block; }" hộ mình, tại ko muốn ai truy cập vào 4r nên mới làm vậy. )

P/s:làm phiền mọi người quá :)

thứ nhất : cái ảnh demo đã die
thứ 2 : link demo vào chả thấy gì ngoài một màu trắng toát
\

Thứ 1: Đang thay link ảnh thì bạn cmt :D
Thứ 2: "(dùng stylish add đoạn "body{ display: block; }" hộ mình, tại ko muốn ai truy cập vào 4r nên mới làm vậy. )"
  Bài viết hay nhất37
Up ảnh xong đừng nhấn nút xóa, nó không chỉ xóa ảnh trong bài mà còn xóa luôn ảnh trên imgur.
Khi mình vào xem thì 4rum đã chuyển sang bảo trì.
  Bài viết hay nhất38
Zzbaivong wrote:Up ảnh xong đừng nhấn nút xóa, nó không chỉ xóa ảnh trong bài mà còn xóa luôn ảnh trên imgur.
Khi mình vào xem thì 4rum đã chuyển sang bảo trì.
kiểm tra phần tử >> chọn thẻ body >> nhìn qua cột style >> chuyển từ body{display:none} thành body{display:block}
p/s : bác này có cách bảo trì hơi độc - kiểu này mem lại tưởng hỏng fm @@
  Bài viết hay nhất39
Nếu được thì cho mình hỏi thuộc tính width của 4 mục nhỏ kia là gì?
  Bài viết hay nhất40
anhdaodaica1 wrote:Nếu được thì cho mình hỏi thuộc tính width của 4 mục nhỏ kia là gì?
CSS dòng 9:
width: 25%
CSS dòng 10:
width: 50%
Vì table tự căn đều chiều rộng các thẻ td, bên không có width dòng 9, nó vẫn sẽ tự căn 25%.
Lỗi chiều rộng của bạn là khi vừa cài xong last đã bị lỗi ah?
  Bài viết hay nhất41
You cannot reply to topics in this forum