Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

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

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:19 

    Thống kê bài viết 3 cột



    Chức năng


    Thống kê bài viết, với 3 cột thông tin:

    1. Danh sách bài viết mới
    2. 10 bài viết được xem nhiều nhất
    3. 10 bài viết trả lời nhiều nhất

    Chú ý: Hướng dẫn này dành cho punBB


    Demo



    Thống kê bài viết 3 cột


    Hướng dẫn


    Bước 1

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

    Thêm vào CSS:
    Code:
    /* Latest topics */
    #left,#left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    #content-container div#container{float:none}
    #content-container div#main{margin-bottom:0}
    *+ html #content-container div#main{margin-left:0;margin-right:0}
    #content-container div#left{float:none;width:100%}
    #left{margin:30px 0}
    #left td{border-width:0 1px;width:25%;vertical-align:top}
    #left th{width:25%;vertical-align:middle}
    #left .double{border-left:0;width:50%}
    #left th.double{padding:0 12px;text-align:left}
    #left ul,#left th{padding:10px 10px 10px 30px;margin:0}
    #left ul{max-height:210px;overflow:auto}
    #left li{counter-increment:Zzindex;height:19px;line-height:19px;position:relative;width:100%;list-style-type:none}
    #left li:before{content:counter(Zzindex);display:block;height:17px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:1px;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:10}
    #left li:after{content:" ";background:#EBEBEB;display:block;width:6px;height:6px;position:absolute;top:6px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
    #left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
    #left li:nth-child(2):before,#left li:nth-child(2):after{background:#FD5405}
    #left li:nth-child(3):before,#left li:nth-child(3):after{background:#FDB55A}
    #left li:nth-child(3) ~ li:before,#left li:nth-child(3) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
    #left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:60%;left:0;top:0}
    #active_topics a,#viewed_topics a{width:70%}
    #left #recent_topics a{width:80%}
    #left .lastRight{right:0;text-align:right;position:absolute;top:0;left:auto;width:100px!important}
    /* Tooltip */
    #tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}

    Bước 2

    ACP >> Display >> QLTT

    over_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>Thống kê bài viết</h2>
          </div>
       </div>
       <div class="main-content">
          <table cellspacing="0" class="table">
             <tbody class="statused">            
                <tr>              
                   <!-- BEGIN giefmod_index1 -->
                   {giefmod_index1.MODVAR}                                
                   <!-- END giefmod_index1 -->
                </tr>
             </tbody>
          </table>
       </div>  
       <script type="text/javascript">
          //<![CDATA[          
          var versionMinor = parseFloat(navigator.appVersion),
          versionMajor = parseInt(versionMinor),
          IE = document.all && !window.opera && 7 > versionMajor,
          IE7 = document.all && !window.opera && 7 <= versionMajor,
          OP = window.opera,
          FF = document.getElementById,
          NS = document.layers;
          function get_item(a, c) {        
             if (IE) return c ? window.opener.document.all[a] : document.all[a];        
             if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);        
             if (NS) return c ? window.opener.document.layers[a] : document.layers[a]    
          }          
          var current_tooltip;
          function show_tooltip(a, c) {        
             var b = get_item("tooltip");        
             b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));        
             b.style.zIndex = 1000;        
             b.style.position = "absolute";        
             b.innerHTML = "<p>" + c + "</p>";        
             b.style.visibility = "visible";        
             a.onmousemove = move_tooltip;        
             a.onmouseout = function() {            
                b.style.visibility = "hidden"        
             };        
             a.title = ""    
          }    
          var offsetxpoint = -60,
          offsetypoint = 20,
          real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
          real_body = document.documentElement ? document.documentElement : document.body;
          function move_tooltip(a) {        
             var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
             d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
             b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
             e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
             f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;        
             current_tooltip = get_item("tooltip");        
             current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";        
             current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"    
          }    
          $("#recent_topics li a:first-child").mouseover(function() {        
             show_tooltip(this, $(this).next().html())    
          });    
          $("#active_topics a, #viewed_topics a").mouseover(function() {        
             show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));    
          }).after(function() {        
             return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'    
          });     //]]>
       </script>
    </div>

    Bước 3

    ACP >> Display >> Portal

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

    mod_recent_topics:
    Code:
    <!-- BEGIN classical_row -->
    <!-- <tr> -->
       <th class="double">
          <h2>Bài viết mới
             <span class="right">Người gửi cuối</span>
          </h2>
       </th>
       <th>
          <h2>Trả lời nhiều nhất</h2>
       </th>
       <th>
          <h2>Lượt xem nhiều nhất</h2>
       </th>
    </tr>
    <tr>
       <td class="double">
          <ul id="recent_topics">
             <!-- 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" style="display:none">
                   <p>
                      <span style="color:red">Tiêu đề</span>: {classical_row.recent_topic_row.L_TITLE}
                   </p>
                   <p>
                      <span style="color:blue">Gửi lúc</span>: {classical_row.recent_topic_row.S_POSTTIME}                                        
                   </p>
                </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 -->
          </ul>
       </td>
    <!-- </tr> -->
    <!-- END classical_row -->

    mod_most_active_topics:
    Code:
    <td>
       <ul id="active_topics" class="half">
          <!-- BEGIN TOPIC -->
          <li>
             <span style="display:none">{TOPIC.TITLE}</span>
             <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
          </li>
          <!-- END TOPIC -->
       </ul>
    </td>

    mod_most_viewed_topics
    Code:
    <!--<tr>-->
       <td>
          <ul id="viewed_topics" class="half">      
          <!-- BEGIN TOPIC -->      
             <li>        
                <span style="display:none">{TOPIC.TITLE}</span>        
                <a href="{TOPIC.LINK}" alt="{TOPIC.TITLE}">{TOPIC.NAME}</a>
             </li>      
          <!-- END TOPIC -->
          </ul>
       </td>
    </tr>

    Bước 4

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


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


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


    Tùy chỉnh recent topics


    Nguồn


    Zzbaivong (devs.forumvi.com)
    Tags: #tutorial #latest-topics
    You cannot reply to topics in this forum