[Lasttopic] TeenLyThuongKiet ver 1 đơn giản đẹp

Bàiviết thứ :1
Đăng vào:30.10.13 14:59

anhchiatay

Danh hiệu :Member mới

demo: http://trasua52.forumvi.com/

Last này mình làm đơn giản chỉ 2 cột và toolip thôi nên rất nhẹ

mod_recent_topics:

Code:: <table width="100%"> <tr> <td width="500" style="line-height:20px;background:#fff;padding:3px;" valign="top"> <div class="vtlaitopx" style="background:white;"> <div class="topx" id="vtlai_topx" > <div class="tab" > <a class="active vtlai_topx_tabitem" href="#all">Bài Mới</a> <a href="#520" class="vtlai_topx_tabitem">Nhật ký</a> <br class="clear" clear="all"/> </div> <br/> <div class="main-content"> <div style="padding:10px;"> <div style="overflow: hidden !important;height:198px;background: url(http://i75.servimg.com/u/f75/14/65/61/19/list10.gif) no-repeat 2px 5px transparent;padding:5px;padding-left:25px;"> <div style="background: transparent url(http://i75.servimg.com/u/f75/14/65/61/19/listbg11.gif) repeat;">  <ul class="baixemnhieu" style="overflow: auto !important;max-height: 200px; padding-right: 10px;" >  <li width="0%" class="newtopic"> <span id="tieude1" onmouseover="show_tooltip(this,$(this).next().html(),'Thông Tin Bài Viết');"><a href="{classical_row.recent_topic_row.U_TITLE}" oncontextmenu="return xemtopic(this.href,'hehee');"><span class="lengtht" ><b><font size="2">{classical_row.recent_topic_row.L_TITLE}</font> </b></span></a></span> <span style="display:none" class="dulieu2"> <p class="tiplFMvi">Tiêu đề: <font color="blue">{classical_row.recent_topic_row.L_TITLE}</font> </p> <p>Thời gian gửi: <font color="#FF6600">{classical_row.recent_topic_row.S_POSTTIME}</font> </p> <p>Người gửi cuối:  {classical_row.recent_topic_row.switch_poster.S_POSTER}  </p> </span>  <span class="username"><a id="tacgia" style="float:right" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font size="2">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a></span>  <span class="thoigian" style="display:none">{classical_row.recent_topic_row.S_POSTTIME}</span>  {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}  </li>  <ul>  </div></div></div> <script src="http://illiweb.com/rs3/24/frm/admin/admin.js" type="text/javascript"></script> <script type="text/javascript"> function gioihanl(a){ if(a.length > 40){ return a.substring(0,40)+'...';}else{return a;} }; function shpost(a){ window.open(a,'','width=800,height=195,top=195,left=195,menubar=no,titlebar=no,location=no'); }; </script> <script>$("span.lengtht").each(function(){ if ($(this).text().length > 30) {$(this).text($(this).text().substr(0, 30));$(this).append('...'); } });</script> <style> div.title { font-size: 12px; font-weight: bold; text-decoration: none; color: #fff; text-align:center; } .li { text-decoration: none; } /* Tooltip */ #tooltip .tiplFMvi{border-bottom:1px dashed;margin-bottom:2px;padding-bottom:2px} #tooltip{background-color:#FFF;border:1px solid #DDD;border-radius:3px 3px 3px 3px;box-shadow:2px 2px 3px #746E6E;color:#131313;max-width:550px;padding:15px 20px;position:absolute;z-index:999} #active_starters,#most_active,#pun-visit,#users_month,#users_week,#tooltip .header { display:none; } .gietno{overflow:hidden;position:absolute;text-overflow:ellipsis;white-space:nowrap;width:160px} .lengtht{overflow:hidden;} .chutop{Background: url(http://i75.servimg.com/u/f75/14/65/61/19/33e74910.png) repeat-x top left; background-color: #0099ff; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; margin-top:3px; margin-bottom:3px; padding: 7px 10px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px; border: 1px solid rgba(13, 58, 236, 0.21); -moz-box-shadow: 0px 1px 2px rgba(189,189,189,1),inset 0px 1px 1px rgba(145,230,247,1); -webkit-box-shadow: 0px 1px 2px rgba(189,189,189,1),inset 0px 1px 1px rgba(145,230,247,1); text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2),0px 1px 1px rgba(255, 255, 255, 0.4);} </style> </td><td width="0px" style=""></td> <!--</td>

mod_top_posters:

Code:: --> <td valign="top" style="padding:0px;background:#fff"> <table width="100%"> <tr> <td width="200" style="line-height:20px;background:#fff;padding:3px;" valign="top"> <div class="vtlaitopx1" style="background:white;"> <div class="topx1" id="vtlai_topx1" > <div class="tab1" > <a class="active1 vtlai_topx_tabitem1" href="#all">Top Post</a> <br class="clear" clear="all"/> </div> <br/> <div class="main-content"> <div style="padding:10px;"> <div style="overflow: hidden !important;height:195px;background: url(http://i75.servimg.com/u/f75/14/65/61/19/list10.gif) no-repeat 2px 5px transparent;padding:5px;padding-left:25px;"> <div style="background: transparent url(http://i75.servimg.com/u/f75/14/65/61/19/listbg11.gif) repeat;"> <ul class="baixemnhieu2" style="overflow: auto !important;max-height: 300px; padding-right: 10px;" >  <li width="0%" class="newtopic"> <span onmouseover="show_tooltip(this,'{POSTER.NB_POSTS}','','black')" class="gietno" width="1%"><font size="2">{POSTER.NAME}</font></span> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ $(function () { $(".newtopic:contains('»')").hide(); $(".dulieulast").load('/search?search_keywords=&search_author=*_* .table .statused tr:lt(20)', function () { var i; for (i = 0; i < 20; i++) { $(".newtopic:eq(" + i + ")").find(".dulieu2").html('<span> </span><b>' + $(".newtopic:eq(" + i + ")").find("#tieude1").text() + ' </b><hr>Tác giả : <b>' + $(".dulieulast tr:eq(" + i + ")").find(".tcl a[href^='/u']").text() + '</b><br>Trạng Thái : ' + $(".dulieulast tr:eq(" + i + ")").find(".tcl .status img").attr("alt") + '<br>Thuộc Chuyên Mục : ' + $(".dulieulast tr:eq(" + i + ")").find(".tc2").text() + '<br>Trả lời : ' + $(".dulieulast tr:eq(" + i + ")").find(".tc3:first").text() + '<br>Lượt Xem : ' + $(".dulieulast tr:eq(" + i + ")").find(".tc3:last").text() + '<hr>Người Gửi Cuối : <b>' + $(".newtopic:eq(" + i + ")").find("#tacgia").text() + '</b><br>Vào Lúc : ' + $(".newtopic:eq(" + i + ")").find(".thoigian").text()); } $(".loading").hide().next().fadeIn(1000); }); }); //]]> </script> </td> </tr> </table> </td></tr></tbody></table></td> </tr> </table> </td></tr></tbody></table>

css:

Code:: /* top */ .vtlaitopx1 .topx1 .tab1 { margin:0px 0px 5px 0px; display:block; border-bottom:2px solid #1a99b1; width:280px; height: 26px; overflow:hidden; float:left; } .vtlaitopx1 .topx1 .tab1 .active1 { background-color: #1a99b1; color:#FFF; } .vtlaitopx1 .topx1 .tab1 a { margin:0px 1px 0px 0px; display:inline-block; background-color:#eaeaea; color:#4f4f51; padding:5px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:lighter; text-decoration: none; } .vtlaitopx1 .topx1 .tab1 a:hover { padding-top:3px; border-top:2px solid #1a99b1; } /*---------TopX Tab-----------*/ .vtlaitopx .topx .tab { margin:0px 0px 5px 0px; display:block; border-bottom:2px solid #1a99b1; width:660px; height: 26px; overflow:hidden; float:left; } .vtlaitopx .topx .tab .active { background-color: #1a99b1; color:#FFF; } .vtlaitopx .topx .tab a { margin:0px 1px 0px 0px; display:inline-block; background-color:#eaeaea; color:#4f4f51; padding:5px; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:lighter; text-decoration: none; } .vtlaitopx .topx .tab a:hover { padding-top:3px; border-top:2px solid #1a99b1; }

ACP -> Modules -> Forum widgets management
sắp xếp widgets : Recent topic -> top postter (máy ko có pts nên ko có ảnh ai có cho xin cái ảnh nhé)

Cuối cùng: Like topic I love you