demo :


mod_recent_topics :

Code:

<div id="left" style="z-index:998;position: relative;
  float: left;width: 600px;margin-right: 10px;height: 242px;padding-top: 1px;">
 
<div class="module main">
  <div class="tag mekiep">
    <div data="0" class="last active">Bài mới</div>
    <div data="1" class="last">WebGames</div>
    <div data="9" class="last">Tool Games</div>
    <div data="5" class="last">Vlcm Private</div>
  <div data="79" class="last">Tin Tức</div>
 </div>
 
  <div id="loadddddd" style="display:none"> 
      </div>
     
        <div class="main-content ******" style="padding:2px;overflow: auto !important;
height: 200px;">
          <div style="background: url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/list.gif) no-repeat -2px 0px transparent;padding: 0px 1px 1px 1px;padding-left: 21px;">
                    <div style="background: transparent url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/listbg.gif) repeat;">
        <ol id="lastest" class="forum0 activea">
       
        <!-- BEGIN classical_row -->



 <!-- BEGIN recent_topic_row -->
         
         
          <li>
            <span class="aaa" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
           
 <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>

   
            </span>
<!-- BEGIN switch_poster -->
              <span class="toppost" style="float:right;margin-right: 5px;">
 <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
 
            </span>
                <!-- END switch_poster -->
 

     
          </li>
        <!-- END recent_topic_row -->

<!-- END classical_row -->
       
       
       
        </ol>
            </div>
          </div>
          <div style="background: url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/list.gif) no-repeat -2px 0px transparent;padding: 0px 1px 1px 1px;padding-left: 21px;">
                    <div style="background: transparent url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/listbg.gif) repeat;">
        <ol id="lastest" class="forum1">
         
          <li>
         
            <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:460px!important">

                   

</span>
        </li></ol>
            </div></div>
  <div style="background: url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/list.gif) no-repeat -2px 0px transparent;padding: 0px 1px 1px 1px;padding-left: 21px;">
                    <div style="background: transparent url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/listbg.gif) repeat;">
          <ol id="lastest" class="forum9"><li>
            <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width:460px!important">


</span></li></ol>
    </div>
          </div>
  <div style="background: url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/list.gif) no-repeat -2px 0px transparent;padding: 0px 1px 1px 1px;padding-left: 21px;">
                    <div style="background: transparent url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/listbg.gif) repeat;">
            <ol id="lastest" class="forum5"><li>
              <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:460px!important">

</span></li></ol>
    </div>
    </div>
           

  <div style="background: url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/list.gif) no-repeat -2px 0px transparent;padding: 0px 1px 1px 1px;padding-left: 21px;">
                    <div style="background: transparent url(http://i337.photobucket.com/albums/n395/kalenv1/4r/ads/listbg.gif) repeat;">
<ol id="lastest" class="forum74"><li>
              <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:460px!important">


          </span></li> 
</ol>   
    </div>
          </div>
              </div></div>
 
 
 
 

  </div>
<style>




#content-container div#left {
float: none;
margin-bottom: 10px;
width: 100%;
}
.module.main {
margin: 0!important;
}
#lastest a{
  font-weight:bold;
  }
  #lastest .aaa a{
font: bold 12px Tahoma;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 350px;
 
  }
.tag div {
background-color: #171f35;
color: #FFF;
cursor: pointer;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
height: 34px;
line-height: 34px;
margin: 0 5px 0 0;
text-decoration: none;
padding-left: 15px;
padding-right: 15px;
  font-weight: bold;
}
.tag div.active{background-color:#434b5e;color:#FFF}
.****** ol{display:none}.****** ol.activea{display:block}

.tabs{background:#EFEFEF;border-bottom:1px solid #CAD9EA;border-top:1px solid #FFF;margin:0 0 5px;
  padding:0 0 26px}
.tabs li{border-right:1px solid #b4d0f3;float:left;font-size:11px;height:30px;
  line-height:30px;list-style:none}

.tabs li.current{background:#f7f7f7;font-weight:700;height:27px}

#lastest {
line-height: 20px;
list-style:none;
}
.****** ol.activea {
display: block;
}


.****** ol {
display: none;
}


</style>

<script>$(function() {$(".tag div").click(function() {$(".active").removeClass("active");$(this).addClass("active");var a = $(this).attr("data");0 != a ? ($("#loading").show(),$("#loadddddd").load("/f" + a + "-forum .table tr", function() {var b = "";for(i = 1;i < $("#loadddddd tr").length;i++) {b = b + '<li><span class="aaa" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width:460px!important">' + $(this).find('tr:eq('+i+') .topic-title').html() +'</span>  <span style="float: right;margin-right: 5px;">' + $(this).find('tr:eq('+i+') td.tcr strong').html() + '</span></li>'}$(".activea").removeClass("activea");$(".forum" + a).addClass("activea").html(b);$("#loading").fadeOut();})) : ($(".activea").removeClass("activea"), $(".forum" + a).addClass("activea"))})});</script>

mod_top_post_users_month:

Code:

<div id="official" style="display: none;overflow: hidden!important;"><div class="main-content1" style="background-color: #fbfbfb;
border: 1px solid #ddd;padding: 2px;">
          <td height="50%" width="50%" id="toptuan" valign="top">

     
                  <div id="poster" style="display:block;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top">
  <td style="border-top: 0px none; padding: 0px; background: transparent url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24" height="200"><img src="http://2img.net/i/fa/empty.gif" width="24" border="0" /></td><td style="padding-bottom: 4px;border-top: 0px none;padding-right: 5px;line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"><!-- BEGIN POSTER --><font style="font-family: Tahoma; font-size: 12px">  <span onmouseover="show_tooltip(this,'{POSTER.NB_POSTS}','','black')" class="{POSTER.ROW_CLASS}" width="1%">{POSTER.NAME}</span><span style="float:right;">{POSTER.NB_POSTS}</span></font><br/><!-- END POSTER --></td></tr></table></div>
 
      </td>

  </div></div>
 

mod_top_post_users_week :

Code:

<div class="usual">
          <ul class="idTabs">
         
            <li><a href="#jquery" class="selected">Mem Tuần</a></li>
            <li><a href="#official" class="">Mem Tháng</a></li>
            <li><a href="#tvtop" class="">Mem Top</a></li>
          </ul>
          <div id="jquery" style="display: block;overflow: hidden!important;"><div class="main-content1" style="background-color: #fbfbfb;
border: 1px solid #ddd;padding: 2px;">
          <td height="50%" width="50%" id="toptuan" valign="top">

     
                  <div id="poster" style="display:block;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top">
  <td style="border-top: 0px none; padding: 0px; background: transparent url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24" height="200"><img src="http://2img.net/i/fa/empty.gif" width="24" border="0" /></td><td style="padding-bottom: 4px;border-top: 0px none;padding-right: 5px;line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"><!-- BEGIN POSTER --><font style="font-family: Tahoma; font-size: 12px">  <span onmouseover="show_tooltip(this,'{POSTER.NB_POSTS}','','black')" class="{POSTER.ROW_CLASS}" width="1%">{POSTER.NAME}</span><span style="float:right;">{POSTER.NB_POSTS}</span></font><br/><!-- END POSTER --></td></tr></table></div>
 
      </td>

  </div></div>
       
      </div>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>

<style>

.usual li{
line-height: 34px;
text-align: center;
display: inline-block;
font-weight: bold;
font-size: 12px;
text-align: center;
padding: 0!important;
  margin: 0 5px 0 0;
}
.usual li a{
padding-left: 15px;
padding-right: 15px;
height: 34px;
line-height: 34px;
text-align: center;
background: #171f35;
color: #fff!important;
display: inline-block;
font-weight: bold;
font-size: 12px;
margin-left: -1px;
  font-family: Arial, Helvetica, sans-serif;
}
.selected {
background: #434b5e!important;
text-align: center;
z-index: 9!important;
color: #fff;
  border-left: 5px solid #6cb2e4;
}
</style>

mod_top_posters :

Code:

 <div id="tvtop" style="display: none;overflow: hidden!important;"><div class="main-content1" style="background-color: #fbfbfb;
border: 1px solid #ddd;padding: 2px;">
          <td height="50%" width="50%" id="toptuan" valign="top">

     
                  <div id="poster" style="display:block;">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top">
  <td style="border-top: 0px none; padding: 0px; background: transparent url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24" height="200"><img src="http://2img.net/i/fa/empty.gif" width="24" border="0" /></td><td style="padding-bottom: 4px;border-top: 0px none;padding-right: 5px;line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"><!-- BEGIN POSTER --><font style="font-family: Tahoma; font-size: 12px">  <span onmouseover="show_tooltip(this,'{POSTER.NB_POSTS}','','black')" class="{POSTER.ROW_CLASS}" width="1%">{POSTER.NAME}</span><span style="float:right;">{POSTER.NB_POSTS}</span></font><br/><!-- END POSTER --></td></tr></table></div>
 
      </td>

  </div></div>

Sắp Xếp Widget như hình sau :


Nguồn : GamePCV

last nayf hinh nhu share roi

dsfsdfsdfsdfsdfsdf

đủ hết chưa z

cho mình hỏi sửa link ở mấy cái tab như thế nào vậy?

ai bík cách chuyển tag k
e làm hoài nó k chuyển

mình cũng vậy, ai biết chỉ với, plzzzzz
Thay link tab thế nào vậy? mình thử để link vào mà ko đc

Thiếu code rùi ... xem lại đii An

upppppppppp
ai bik chỉ vs, mình đang cần, thanks

xem cai lol

ko co css chay dc lol ...