Demo: mod_recent_topics

Code:

<style>

  .muc_post {height:11px;overflow:hidden;font:bold 11px Tahoma;padding:2px 0px;margin-bottom:2px;border-top:1px dashed #ebebeb;}.x123{overflow:hidden}.x123:hover{overflow:auto}#thai_tab {border-bottom: 2px solid #0e99b5;padding-bottom:4px;margin-top:-11px;margin-bottom:4px;padding-left:5px;background-color:#FFF;height:auto;margin-left:-10px;margin-right:-11px;padding-top:5px}#stabs li {display: inline;list-style: none}.pun #stabs li a {padding: 4px 7px;font:bold 11px Arial;color:#333;border:1px solid #bfbfbd;border-bottom:0px;margin-left:4px;}#stabs li.active a {background-color:#0e99b5;border:1px solid #0e99b5;border-bottom:0px;color:#FFF;}.x123 {display: none;}#tab3 hr{border:0px;padding:0px;margin:1px 0px 3px 0px;border-bottom:1px dashed #d4d4d4;width:100%}#tab3 img{margin-left:6px}.muc_post span.ten1{;display:none;color:#fff;font:bold 11px Arial;width:103px;height:13px}.muc_post a:hover span.ten1{display:inline-block;padding:4px 6px;position: absolute;margin-left:-118px;background:#000 url(http://i35.servimg.com/u/f35/16/18/15/10/117.png)no-repeat right top;margin-top:-4px}.pun a.topicn{display:inline-block;width:220px;overflow:hidden;height:13px}.pun a.topici{float:left;margin-right:4px;display:inline-block;width:10px;height:11px;background: url(http://r22.imgfast.net/users/2211/12/43/96/album/post_n10.gif)no-repeat}.pun a.topicb{display:inline-block;width:60px;overflow:hidden;height:13px;margin-left:5px;}</style>
<script src="http://www.phutu.vn/16141.js" type="text/javascript"></script>




<!-- BEGIN classical_row -->
<div style="width:40%;height:230px;float:right;border: 1px solid #ccc;background: #f7f2f7  url(http://i74.servimg.com/u/f74/16/18/15/10/134.png) repeat-y left;margin-top:5px;padding:10px;padding-right:5px">
<div id="thai_tab">
        <ul id="stabs">
            <li class="active"><a href="#tab1">TẤT CẢ BÀI VIẾT</a></li>

     
            <li><a href="#tab3">HỖ TRỢ</a></li>
        </ul>
    </div>
<div id="tab1" class="x123" style="display: block;height:216px">
      <!-- BEGIN recent_topic_row -->
      <div class="muc_post"><a href="{classical_row.recent_topic_row.U_TITLE}" target="_blank" class="topici">
            <a href="{classical_row.recent_topic_row.U_TITLE}" title="{classical_row.recent_topic_row.L_TITLE} {classical_row.recent_topic_row.S_POSTTIME}" ><span class="ten1">{classical_row.recent_topic_row.S_POSTTIME}</span>{classical_row.recent_topic_row.L_TITLE}</a></a>
 
  </div>

 
      <!-- END recent_topic_row --></div>
<div id="tab3" style="float:left;width:289px;height:200px;font: 11px Arial;color:#333;margin-top:10px;background: url(http://i74.servimg.com/u/f74/16/18/15/10/142.png)no-repeat bottom left;" class="x123">
<a href="ymsgr:sendim?lasperpen" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=lasperpen&amp;m=g&amp;t=5"> K I N G</a>( Tiến )<hr>
<a href="ymsgr:sendim?lua_dianguc368" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=lua_dianguc368&amp;m=g&amp;t=5"> @</a><hr>
<a href="ymsgr:sendim?hotboy_donganh_97" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=hotboy_donganh_97&amp;m=g&amp;t=5"> NoName</a><hr>
<a href="ymsgr:sendim?trihaivip_258" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=trihaivip_258&amp;m=g&amp;t=5"> *๖ۣۜ Mr-๖ۣۜ Hải*</a> (Hải)<hr>
<a href="ymsgr:sendim?caominhduc004" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=caominhduc004&amp;m=g&amp;t=5"> Nô Bi Tu</a>(Đức)<hr>
<a href="ymsgr:sendim?tuingheo_tuimat_tinhem" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=tuingheo_tuimat_tinhem&amp;m=g&amp;t=5"> sohack694</a><hr>
<a href="ymsgr:sendim?boyvip_neversock" style="text-decoration: none!important;"><img src="http://opi.yahoo.com/online?u=boyvip_neversock&amp;m=g&amp;t=5"> K I S S</a>
<div style="font:bold 24px Arial;color:#b0b0b0;margin-left:50px;margin-top:22px">05007777777777777</div></div>
</div>
 
<!-- END classical_row -->
 

Top_poster

Code:

  <div style="width:16%;height:230px;border: 1px solid #ccc;background: #f7f2f7  url(http://i74.servimg.com/u/f74/16/18/15/10/134.png) repeat-y left;margin-top:5px;padding:10px;padding-right:5px">
<div id="thai_tab">
        <ul id="stabs">
          <li class="active"><a href="#tab1">TOP BÀI VIẾT</a></li>
         
  </ul>
    </div>
         
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style=" margin-top: 10px; margin-left: -5px; ">
  <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="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif">
      <!-- BEGIN POSTER --><span onmouseover="show_tooltip(this,'{POSTER.NB_POSTS}','','black')" class="{POSTER.ROW_CLASS}" width="1%"><font style="font-family: Tahoma; font-size: 11px"> {POSTER.NAME}</font></span><br/><!-- END POSTER -->
      </td></tr></table>
  </div>
   
 

Tiếp theo vào : ACP>MODULE>Portal & Widgets>Forum widgets management>Create a widget
Widget name : Tabs gunny
Use a table type : chọn không
Widget source * :

Code:

<div style="width:40%;height:230px;float:right;border: 1px solid #ccc;background: #f7f2f7  url(http://i74.servimg.com/u/f74/16/18/15/10/134.png) repeat-y left;margin-top:5px;padding:10px;padding-right:5px">
 
 <td width="50%" style="height:230px;/*float:right;*/border: 1px solid #ccc;background: #f7f2f7  url(http://i74.servimg.com/u/f74/16/18/15/10/134.png) repeat-y left;margin-top:5px;padding:10px;margin-right:5px" valign="top">
    <div id="thay_tabv">
        <ul id="stabs">
            <li class="active"><a href="#tab1" alt="last-mia">GUNNY PRIVATE</a>
            </li>
</ul>
      </div>
    <div id="tab1" class="anthanhcuon tab_gun">
        <table width="100%" border="0">
         
            <tr></tr>
            <div id="tab_gunny">
                </div>
         
        </table>
      </div>
     


<script>
  $(document).ready(function()
  {$("#stabs li").click(function()
  {$("#stabs li").removeClass('active');
  $(this).addClass("active");
  $(".tab_content").hide();
  var selected_tab=$(this).find("a").attr("href");
  $(selected_tab).fadeIn();return false})});
</script>

</div>
<style>
  #thay_tabv {border-bottom: 2px solid #0e99b5;padding-bottom:4px;margin-top:-11px;margin-bottom:4px;padding-left:5px;background-color:#FFF;height:auto;margin-left:-10px;margin-right:-11px;padding-top:5px}
  </style>

CSS:

Code:

/*tabs gunny*/

 .tab_content table tbody tr td,.tab_gun td.row2 {
height: 14px;
overflow: hidden;
font: 12px Arial;
background: url(http://i35.servimg.com/u/f35/17/73/81/42/post_o10.gif) no-repeat left;
padding-left: 15px;
}
 .tab_content .row2,.tab_gun .row2 {
border: 0 none;
margin-left: 3px!important;
line-height: 18px!important;
border-bottom: 1px dashed #d4d4d4!important;
}


  .anthanhcuon
  {
    height:216px;
    overflow:hidden;
  }
  .anthanhcuon:hover
  {
    height:216px;
    overflow:auto;
  }
#lasperpen02 a {
width: 100%;
max-width: 375px;
float: left;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
border: 0 none;
margin-left: 3px!important;
line-height: 15px!important;
overflow: hidden;
height: 14px;
margin-top: 3px;
}

Xong tạo thêm 1 script mới để hiện tabs gunny.

Code:

$(function () {
  $.ajax({url: "/feed/?f=1",
  success: function (ta) {
  for (i = 2; i < 32; i++)
  {
  $('<tr><td class="row2"><div id="lasperpen02"><a title="'+$(ta).find("title:eq(" + i +")").text()+'" href="' +$(ta).find("link:eq(" + i +")").text()+'">' + $(ta).find("title:eq(" + i + ")").text() + "</a></tr></td></div>").appendTo("#tab_gunny");
  }
}})})

In the home page nhé Cười nhe răng

Bổ Sung WidgetLưu ý : Last này nhiều bạn làm bị vỡ khung là do mình chỉnh width hơi rộng phù hợp vs skin các bạn có thể vào toposter vs recent , gunny tabs để chỉnh lại cho phù hợp nha

chèn vào body:

Code:

<!-- BEGIN giefmod_index1 -->{giefmod_index1.MODVAR}<!-- END giefmod_index1 -->
<div style="background: url(http://i74.servimg.com/u/f74/16/18/15/10/199.png)repeat-x left top;height:5px"></div>