[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ấ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?
http://i56.servimg.com/u/f56/18/59/49/93/12-10-10.png
  Bài viết hay nhất30

em chi có như thế này thôi
  Bài viết hay nhất31
ngocchien12 wrote:
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


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:

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:

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
baivong wrote:
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?
Đúng rồi bạn, vừa làm xong là bị ngay. Và mình chèn y như bài này, nhưng hiểu sao lại chỉ lỗi mỗi chiều rộng của 4 mục như trong ảnh thôi. Mong bạn giúp hộ mình :)
  Bài viết hay nhất42
Do bạn đổi class pun thành pun2 nên mất đi đoạn css căn chỉnh chiều rộng cột, thay vào đó nó sẽ lấy chiều rộng của cột lớn nhất.
Thêm vào CSS:
Code:
.pun2 table.table {
   table-layout: fixed;
}
  Bài viết hay nhất43
baivong wrote:Do bạn đổi class pun thành pun2 nên mất đi đoạn css căn chỉnh chiều rộng cột, thay vào đó nó sẽ lấy chiều rộng của cột lớn nhất.
Thêm vào CSS:
Code:
.pun2 table.table {
   table-layout: fixed;
}

Thật sự cảm ơn bạn rất nhiều :X
  Bài viết hay nhất44


Ai cho hỏi..cái phần viết bài nhiều nhất và tích cực tuần ...nó bị chèn lên nhau...ai cho code giới hạn tên ních name hiện ở trên chỉ hiện 4-5 kí tự rồi hiện ... (ba chấm)..hoặc có cách nào khác sửa không vậy..Vs điều kiện giữ nguyên độ rộng của forum...không mở rộng forum ra..Tks all...
  Bài viết hay nhất45
Nếu 4rum bạn đã hẹp rồi thì bạn nên ẩn thông tin số bài đi, đưa vào tooltip khi rê chuột lên nickname, hoặc chỉ giữ lại số %.
  Bài viết hay nhất46
bác cho hướng dẫn cụ thể cách bác nói ở trên vs....ở tooltip mình có đang sử dụng dữ liệu avatar của Devs...Tks.
  Bài viết hay nhất47
Thêm vào cuối phần javascriptindex_box (dưới dòng 73):
Code:
$(".half.group_time .lastRight, .half.group_post .lastRight").text(function(){
   return this.innerHTML.replace(/.+\-\s(\d+%)/, "$1")
});
  Bài viết hay nhất48
Tks bác..Nhưng nhìn số % như thế thì nó hơi chung chung....bác cho hỏi...nếu muốn xóa % và giữ lại cái mấy cái chủ đề và số bài thì phải làm sao..Tks...
  Bài viết hay nhất49
Code:
$(".half.group_time .lastRight, .half.group_post .lastRight").text(function(){
   return this.innerHTML.replace(/(\d+)\s.+/, "$1") + " Số bài"
});
  Bài viết hay nhất50
Không hiện hết tên thành viên! Muốn hiển thị hết tên thành viên thì làm thế nào vậy? Giúp em với! Thanks!
Demo: http://thegioi-tinhoc.forumvi.com/
Ảnh:
You cannot reply to topics in this forum