[Share]Lasttopic cực pro , đa chức năng , dành cho Punbb

Có thể nói đây là last topic ver 2 trong skin fmvi ver 1

Các chức năng trong lasttopic + top post
.Hoạt động trên hàu hết các trình duyệt
.Hỗ trợ 2 ngô ngữ : Anh - Việt
.Thống kê thành viên tích cực và bài viết mới
.Icon trạng thái chủ đề và popup bài viết cuối
.Chuyển đổi 2 chế độ : Thụ gọn và đầy đủ chức năng
.Tùy chỉnh số tin hiển thị
.Toolip hiển thị thông tin chi tiết của chủ đề
.Toolip hiển thị ảnh đại diện ...

Bắt đầu làm nào

Bước 1 :
Thay toàn bộ code trong mod_recent_topics = code sau

Code:

    <!-- BEGIN classical_row -->
    <div class="module main recentWidth">
        <div class="main-head">
            <h3>Thống kê bài viết mới</h3>
            <div id="proLastLoad" class="loaddingLike" style="margin-top:-3px"></div>
            <span id="checktip">
                <span class="open"></span>
                <span class="close"></span>
            </span>
            <select id="numRecent" size="1">
                <option value="155" selected="selected">10</option>
                <option value="235">15</option>
                <option value="315">20</option>
            </select>
        </div>
        <div id="recentnew" class="main-content">
            <ul class="latest_topics">
                <!-- BEGIN recent_topic_row -->
                <li>
                    <span onmouseover="show_tooltip(this, $(this).next().html(), 'FMvi.Org')" alt="{classical_row.recent_topic_row.S_POSTTIME}" class="leftrecent">
                        <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
                    </span>
                    <div class="divtooltip" style="display:none">
                    </div>
                    <span class="imgstatus">
                        <img src="http://i48.servimg.com/u/f48/16/58/89/73/post_o10.png" />
                        <a class="firstTopic" href="javascript:void(0);"><span style="line-height: 18px; font-size: 9px;"> ▼</span></a>
                    </span>
                    <span class="rightrecent">
                        <!-- BEGIN switch_poster -->
                        <a 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 -->{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                        <!-- END switch_poster_guest -->
                        <!-- <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br /> -->
                    </span>
                </li>
                <!-- END recent_topic_row -->
            </ul>
        </div>
        <div id="dulieutip"></div>
        <div id="dulieupostter"></div>
    </div>
    <!-- END classical_row -->

Thay toàn bộ code trong mod_top_posters = Code sau

Code:

    <div class="module main toppost_width">
        <div class="main-head">
            <div class="h3">Thành viên tích cực</div>
        </div>
        <div id="top_posters" class="main-content">
            <ul class="latest_topics">
                <!-- BEGIN POSTER -->
                <li><span style="position: absolute; left: 0pt;">{POSTER.NAME}</span>
                    <span class="sobaiTop" style="position: absolute; right: 0pt;">{POSTER.NB_POSTS}</span>
                </li>
                <!-- END POSTER -->
            </ul>
        </div>
    </div>
    <script type="text/javascript">
      var u;
      var ku = $(".sobaiTop").length;
      for (u = 0; u < ku; u++) {
          $(".sobaiTop:eq(" + u + ")").text($(".sobaiTop:eq(" + u + ")").text().split(" ")[0] + " Bài viết")
      }
    </script>

Bước 2 : thay toàn bộ code trong Memberlist_body = Code sau

Code:

    <!-- BEGIN switch_user_logged_in -->
    <div id="pun-visit" class="clearfix">
      <ul>
          <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
          <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      </ul>
      <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
    </div>
    <!-- END switch_user_logged_in -->

    <!-- BEGIN switch_user_logged_out -->
    <div id="pun-visit">
      <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
    </div>
    <!-- END switch_user_logged_out -->

    <div class="pun-crumbs">
      <p class="crumbs">
          <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} » <strong>{PAGE_TITLE}</strong>
      </p>
    </div>

    <div class="main frm">

      <!-- BEGIN switch_pagination -->
      <div class="paged-head clearfix">
          <p class="paging">{PAGINATION}</p>
      </div>
      <!-- END switch_pagination -->

      <div class="main-head">
          <h1 class="page-title">{L_ORDER_OR_SELECT}</h1>
      </div>

      <div class="main-content">
          <form action="{S_MODE_ACTION}" method="get" class="form-frm">
          <fieldset class="frm-set multi">
            <dl>
                <dt>{L_USER_SELECT}</dt>
                <dd><input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" /></dd>
            </dl>
            <dl>
                <dt>{L_SELECT_SORT_METHOD}</dt>
                <dd>{S_MODE_SELECT}</dd>
            </dl>
            <dl>
                <dt>{L_ORDER}</dt>
                <dd>{S_ORDER_SELECT}</dd>
            </dl>

            <div class="frm-buttons">
                {S_HIDDEN_SID}
                <input type="submit" name="submit" value="{L_SUBMIT}" />
            </div>
          </fieldset>
          </form>

          <fieldset class="frm-set clearfix">
            <div class="frm-form">
                <table class="table" cellspacing="0">
                  <thead>
                      <tr>
                        <th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
                        <!-- BEGIN switch_th_group -->
                        <th class="tc2">{L_GROUPS}</th>
                        <!-- END switch_th_group -->
                        <th class="tc3">{L_INTERESTS}</th>
                        <th class="tc2">{L_JOINED}</th>
                        <th class="tc2">{L_VISITED}</th>
                        <th class="tc3">{L_POSTS}</th>
                        <th class="tc3">{L_PM}</th>
                        <th class="tc3">{L_WEBSITE}</th>
                      </tr>
                  </thead>

                  <tbody>
                      <!-- BEGIN memberrow -->
                      <tr>
                        <td class="tcl avatar-mini">
                            <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG} </a>
                            <span class="dataUserFmvi">
                                <span>
                                    <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a>
                                </span>
                                <div style="display:none"><div style="padding:10px">
                                    <table border="0">
                                        <tbody>
                                            <tr>
                                                <td class="avatarthum" align="left">{memberrow.AVATAR_IMG}</td>
                                                <td align="left">{memberrow.USERNAME}
                                                    <hr />
                                                    <span class="thamtop">Tham gia</span>:
                                                    <font color="violet">{memberrow.JOINED}</font>
                                                    <br />
                                                    <span class="truytop">Truy cập cuối</span>:
                                                    <font color="orange">{memberrow.LASTVISIT}</font>
                                                    <br />
                                                    <span class="baiBtop">Bài viết</span>:
                                                    <font color="cyan">{memberrow.POSTS}</font>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div></div>
                                <span class="left20" style="position: absolute; right: 0pt; display: none!important;">
                                    <span class="sobaiTop">{memberrow.POSTS} </span>
                                    <span class="baiBtop">Bài viết</span>
                                </span>
                            </span>
                        </td>
                        <!-- BEGIN switch_td_group -->
                        <td class="tc2">{memberrow.GROUPS}</td>
                        <!-- END switch_td_group -->
                        <td class="tc3">{memberrow.INTERESTS}</td>
                        <td class="tc2">{memberrow.JOINED}</td>
                        <td class="tc2">{memberrow.LASTVISIT}</td>
                        <td class="tc3">{memberrow.POSTS}</td>
                        <td class="tc3">{memberrow.PM_IMG}</td>
                        <td class="tc4">{memberrow.WWW_IMG}</td>
                      </tr>

                      <!-- END memberrow -->
                      <!-- BEGIN switch_no_user -->
                      <tr>
                        <td colspan="{switch_no_user.COLSPAN_NUMBER}" class="tcr">{switch_no_user.L_NO_USER}</td>
                      </tr>
                      <!-- END switch_no_user -->
                  </tbody>
                </table>
            </div>
          </fieldset>
      </div>

      <div class="main-foot">
      </div>

      <!-- BEGIN switch_pagination -->
      <div class="paged-foot clearfix">
          <p class="paging">{PAGINATION}</p>
      </div>
      <!-- END switch_pagination -->

    </div>

Bước 3 : Thêm vào cuối Overall_footer_begin

Code:


    <!-- BEGIN switch_user_logged_in -->
    <script type="text/javascript" src="http://fmvi-group.googlecode.com/files/FMvi-last-like.js"></script>
    <!-- END switch_user_logged_in -->
    <!-- BEGIN switch_user_logged_out -->
    <script type="text/javascript">
        $("#left").fadeIn(1000);
        $("#checktip .open").click(function () {
            alert("Hãy đăng nhập để có thể sử dụng chức năng này");
        });
        $("#left .module .main-content").height(155);
        $("#top_posters .latest_topics li:gt(9), #recentnew .latest_topics li:gt(9)").hide();
        $(".latest_topics span").mousemove(function(){
            $("#tooltip").remove()
        });
    </script>
    <!-- END switch_user_logged_out -->


Bước 4 : Trong Overall_footer_end tìm đoạn :

Code:

    <!-- BEGIN switch_facebook_login -->

thêm vào bên trên code đó =

Code:

      <script type="text/javascript" src="http://chienthan32.forumvi.com/11295.js"></script>

Bước 5 : Tìm trong Overall_header đoạn code sau :

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    .... đến ...

      <!-- BEGIN switch_fb_login -->

Thay thế đoạn đó = code sau :

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
    <head>
      <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
      <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <!-- BEGIN switch_compat_meta -->
      <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
      <!-- END switch_compat_meta -->
      <!-- BEGIN switch_canonical_url -->
      <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
      <!-- END switch_canonical_url -->
      {META_FAVICO}
      {META}
      {META_FB_LIKE}
      <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
      {T_HEAD_STYLESHEET}
      {CSS}
      <!--[if lte IE 6]>
            <style type="text/css">
              .box{width:920px !important}
          </style>
      <![endif]-->
      <noscript>
            <style type="text/css">
              #left{display:block !important}
              .module .main-content{height: 12.3em !important}
              .toppost_width{width: 290px;}
              .recentWidth{width: 658px;}
              .latest_topics{overflow: hidden !important; height: 12.3em !important}
              .chatbox, .fmviToggle, #checktip .open{display:none}
          </style>
      </noscript>
      <!-- BEGIN switch_ticker -->
      <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
      <!-- END switch_ticker -->
      <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
      <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
      <script src="{JQUERY_PATH}" type="text/javascript"></script>

      <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
      <script type="text/javascript">
          function langEV() {
              if ($("html").attr("xml:lang") == "en") {
                  return true;
              } else if ($("html").attr("xml:lang") == "vi") {
                  return false;
              }
          }
      </script>
      <!-- BEGIN switch_fb_login -->

Bước 6 : Thay thế toàn bộ code trong Search_results_topics = code sau

Code:

    <!-- BEGIN switch_user_logged_in -->
    <div id="pun-visit" class="clearfix">
      <ul>
          <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
          <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      </ul>
      <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
    </div>
    <!-- END switch_user_logged_in -->
    <!-- BEGIN switch_user_logged_out -->
    <div id="pun-visit">
      <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
    </div>
    <!-- END switch_user_logged_out -->

    <div class="pun-crumbs">
      <p class="crumbs">
          <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} » <strong>{L_SEARCH_TITLE}</strong>
      </p>
    </div>

    <div class="main paged">
    <form action="{S_ACTION}" method="post" name="post" onsubmit="return verify_select();" class="frm-form">

      <div class="main-head">
          <h1 class="page-title">{L_SEARCH_MATCHES}</h1>
      </div>

      <div class="main-content">
          <table class="table" cellspacing="0">
            <thead>
                <tr>
                  <th class="tcl">{L_TOPICS}</th>
                  <th class="tc2">{L_FORUM}</th>
                  <th class="tc3">{L_REPLIES}</th>
                  <th class="tc3">{L_VIEWS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
                </tr>
            </thead>

            <tbody class="statused">
                <!-- BEGIN searchresults -->
                <tr>
                  <td class="tcl tdtopics search">
                      <span class="status">
                        <img src="{searchresults.TOPIC_FOLDER_IMG}" alt="{searchresults.L_TOPIC_FOLDER_ALT}" title="{searchresults.L_TOPIC_FOLDER_ALT}" />
                      </span>

                      {searchresults.NEWEST_POST_IMG}
                      {searchresults.PARTICIPATE_POST_IMG}
                      {searchresults.TOPIC_TYPE}
                      <h2 class="topic-title">
                        <a class="topictitle" href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a>
                        <div class="tooltipFMvi" style="display:none"><div style="padding:10px">
                            <p class="tiplFMvi">Tiêu đề:
                              <font color="#FFFF00">{searchresults.TOPIC_TITLE}</font>
                            </p>
                            <p>Tạo chủ đề: {searchresults.TOPIC_AUTHOR}</p>
                            <p>Chuyên mục:
                              <font color="#0099FF">{searchresults.FORUM_NAME}</font>
                            </p>
                            <p>Trạng thái:
                              <font color="#CC0000">{searchresults.L_TOPIC_FOLDER_ALT}</font>
                            </p>
                            <p>Lần xem:
                              <font color="#FF66CC">{searchresults.VIEWS}</font>
                            </p>
                            <p class="tiplFMvi">Lượt trả lời:
                              <font color="#009933">{searchresults.REPLIES}</font>
                            </p>
                            <p>Người gửi cuối: {searchresults.LAST_POST_AUTHOR}</p>
                            <p>Thời gian gửi:
                              <font color="#FF6600">{searchresults.LAST_POST_TIME}</font>
                            </p>
                                </div></div>
                                                    </h2>
                      {searchresults.GOTO_PAGE}
                      {searchresults.L_BY} {searchresults.TOPIC_AUTHOR}
                  </td>
                  <td class="tc2"><a href="{searchresults.U_VIEW_FORUM}">{searchresults.FORUM_NAME}</a></td>
                  <td class="tc3">{searchresults.REPLIES}</td>
                  <td class="tc3">{searchresults.VIEWS}</td>
                  <td class="tcr">{searchresults.LAST_POST_TIME} {searchresults.L_BY} {searchresults.LAST_POST_AUTHOR}{searchresults.LAST_POST_IMG}</td>
                </tr>
                <!-- END searchresults -->
            </tbody>
          </table>
      </div>

      <div class="main-foot">
      </div>

      <div class="paged-foot clearfix">
          <p class="paging">{PAGINATION}</p>
          <p class="posting">{L_BACK_TO_TOP}</p>
      </div>
    </form>
    </div>


Bước 7 : Thêm vào Css đoạn code sau

Code:



    body{font-weight: 300;}
    a,a:link,a:hover{text-decoration:none!important}
    .user-basic-info img{max-width: 150px}
    a[href^="/report?mode=report"],#left,#tooltip .header,.imgstatus, #textarea_content dt, #dulieutip, #dulieupostter, #sapxepdulieu, .tipchuthich {display:none}
    #show_color{display:block}
    .main-foot p,.main-head p{width:50%!important}
    #pun-logo{padding-right:10px}
    p#pun-desc{color:#FFCE30;margin-left:20px;padding:.5em 0 0 5px}
    #pun-foot .copyright{text-shadow:1px 1px 1px #000}
    blockquote{background-color:#EDF7FF!important;border:1px dashed #1A5381!important;padding:5px!important}
    blockquote cite{background-color:#E4E6E4;box-shadow:1px 1px 1px;display:inline!important;margin:2px 10px 2px 2px !important;padding:5px 5px 0}



    /* Latest topic */
    .leftrecent{height:16px;left:0;overflow:hidden;position:absolute;width:500px}
    .rightrecent{position: absolute; right: 0pt;}
    .imgstatus{position: absolute; left: -30px; padding: 0pt 4px; background-color: #FFF;}
    #content-container div#left{float:none;width:100%;padding:10px 0}
    *+ html #content-container div#main{margin-left:0}
    * html #content-container #main-content{overflow:visible;margin-right:0}
    * html #content-container div#main{margin-right:-99%;width:100%;float:none}
    .latest_topics{list-style:decimal-leading-zero outside none;text-align:left;margin:0!important;padding:0 5px 0 30px}
    .latest_topics li{position:relative}
    .toppost_width{float:left; width: 250px}
    .recentWidth{float: left; width: 698px;}
    .recentWidth .main-head{position: relative; height: 1.3em;overflow: hidden;}
    .recentWidth h3{position: absolute; left: 10px}
    .pun{min-width:948px!important;width:948px;border:3px double #999;background-color:#FFF}
    #content{width:100%!important}
    #checktip .close,#checktip .open{height:30px;width:30px;cursor: pointer;}
    #checktip .close{background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancy_13.png) no-repeat scroll 0 0 transparent;display:none}
    #checktip .open{background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancy_12.png) no-repeat scroll 0 0 transparent;display:block}
    .loaddinng{background-image:url(http://i48.servimg.com/u/f48/16/58/89/73/loadin12.gif);background-position:center center;background-repeat:no-repeat;height:150px;width:180px}
    #checktip{position:absolute;right:10px;top:3px;z-index:300}
    #numRecent{display:none;position:absolute;right:12px;top:7px}




    /* tooltip */
    #tooltip .tiplFMvi{border-bottom:1px dashed;padding-bottom:5px;margin-bottom:5px}
    #tooltip{max-width:550px;position:absolute;background-image:url(http://i48.servimg.com/u/f48/13/58/60/43/opacit10.png);border:0;padding:0;border-radius:3px;color:#FFF;z-index:99;}



Bước 8 : Cài đặt widgets như hình

Bước 9 : ngay trong khung Forum widgets management các bạn ấn vào bánh xe màu vàng như trong hình


Các bạn để :
Number of recent topics : 20
Activate the topics scrolling : Không

ok và giờ đã hoàn thành last vip

nếu ai không làm được thì reply tại topic này để được hướng dẫn thêm

Chú ý : hãy đọc kĩ và làm sẽ thành công

Nguồn: CNTT-K3