[Invision]Lasttopic Full

**—♥Administrator**

Demo:
[You must be registered and logged in to see this link.] (skin Nice Blue 2)
[You must be registered and logged in to see this link.] (skin CPhuc mới)
[You must be registered and logged in to see this link.] (skin Source)
[HIDE] CSS:

Code:: /*recent topics cho invision------------------------------*/
#content-container div#left {float: none;width: 100%}
#left .module .box-content a {margin:2px 0}
#left{clear:none!important;width:100%!important;float:none!important;counter-reset:stt}
/*top posters*/
.topposter {float: left; width: 250px; margin-right:10px;} /*hiển thị top posters*/
/*most active topics*/
.hottest {float: left; width:250px; margin-left:-265px; margin-top:230px;} /*hiển thị most active topics*/
.topichot{float:left;height:14px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; max-width:220px;}
/*recent topics*/
.recent {float: left; width:680px;} /*hiển thị recent topics, bạn phải chỉnh sửa chiều rộng 680px cho phù hợp với 4r*/
/*recent topics cho invision------------------------------*/

#last-posts{width:100%;}
#select-lastpost{
float: left;
margin: 3px 5px;
background-color: #CCC;
padding: 2px 5px;
border-radius: 10px;
cursor:pointer;
width:115px;}
#option-lastpost{height:18px;}

.op-last{float:left;cursor:pointer;height:18px;margin:-5px 2px 0;width:80px;text-align:center;}
.op-last2{height:28px;margin-top:-12px;font-weight:bold;line-height:250%;border-radius:5px 5px 0 0;border-bottom:0;color:red;background-color:#FFF;}
.op-last-bottom{float:left;border:1px solid #999;margin:-1px 2px 0;padding:5px;cursor:pointer;height:15px;background-color:#DDD;}
.op-last-bottom2{height:23px;font-weight:bold;border-radius:0 0 5px 5px;border-top:0;background-color:white;margin-top:-4px;color:red;background-color:#FFF;}
.op-last-select{font-weight:bold!important;color:#0E53FB;}
.op-choice{float:left;display:none;}
.op-change{float:left;margin-left:5px;}
.op-prew,.op-next{width:20px;height:20px;cursor:pointer;float:left;margin:0 2px;}
.op-prew{background:url(http://i48.servimg.com/u/f48/13/58/60/43/contro18.png) 50% 50%;}
.op-next{background:url(http://i48.servimg.com/u/f48/13/58/60/43/contro20.png) 50% 50%;}
#main-lastpost-mi{background: white url(http://i27.servimg.com/u/f27/15/47/59/46/listbg10.gif);min-height:345px;}
#main-lastpost{background: white url(http://i27.servimg.com/u/f27/15/47/59/46/listbg10.gif);min-height:420px;}
#dl-lastpost{display:none;}
#name-lastpost,.name-lastpost {
position: absolute;
padding: 5px 25px;
font-style: italic;
}

.reply, .view, .box, .guicuoi, .tieude{
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11px;
}

.dl-post {
height: 20px;
}
lp1,.lp2,.lp3,.lp4,.lp5,.lp6,.lp7,.lp8,.imglp, .ds1vds{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
font-size: 11px;
}
.dl-post:hover{
background-color:#DDD;
}

.lpmi {
width: 100px;
}
.ds1vds {
width: 70px;
}

.lp1 img {
height: 14px;
}
.lp2 {
margin-left: 5px;
width: 160px;
}
.lp3 {
margin-left: 188px;
width: 100px;
}
.lp4 {
margin-left: 308px;
width: 100px;
}
.lp5 {
margin-left: 420px;
width: 100px;
}
.lp6 {
margin-left: 538px;
}
.lp7 {
margin-left: 575px;
}
.lp8 {
margin-left: 618px;
height: 14px;
}
.imglp {
margin-left: 608px;
margin-top:1px;
}
#trang-lastpost {
float: right;
}
.TrangTruoc,.TrangSau,.TrangHT{font:12px Courier;cursor:pointer;color:red;float: left;height:30px;width:30px;opacity:0.6;}
.TrangTruoc:hover,.TrangSau:hover,.TrangHT:hover{opacity:1;}
.TrangTruoc{display:none;background:url(http://i48.servimg.com/u/f48/16/58/89/73/fancy_12.png) no-repeat;}
.TrangSau{background:url(http://i48.servimg.com/u/f48/13/58/60/43/fancy_10.png) no-repeat;}
#SoTrangLT{width:25px;height:22px;text-align:center;font-weight:bold;border:3px dashed white;}
#SoTrangLT:hover{border:3px dashed black;color:red;}

#Load {
display:none;
background: white url(http://i48.servimg.com/u/f48/13/58/60/43/loadaj10.gif) 50% 50% no-repeat;
position: fixed;
left: 50%;
top: 40%;
width: 50px;
height: 50px;
border: 10px solid #82D23D;
border: 20px solid rgba(130, 210, 60, .3);
border-radius: 50px;
margin-left: -25px;
}

NOTE: Bảng thống kê này ๖๖ۣۜMình viết trên skin Nice Blue 2 của ligerv. Các bạn chú ý trong đoạn CSS trên có đoạn code này:

Code:: .recent {float: left; width:680px;} /*hiển thị recent topics, bạn phải chỉnh sửa chiều rộng 680px cho phù hợp với 4r*/

๖๖ۣۜMình đã chú thích ở đó, các bạn phải chỉnh lại chiều rộng 680px cho phù hợp với 4r của ๖๖ۣۜMình, nếu không sẽ có lỗi xảy ra.
Ví Dụ: Với nhữg ai sử dụng skin CPhuc mới, khi giữ nguyên code đó last topic sẽ bị xuống dòng. Vì thế, khi sử dụng skin CPhuc mới, bạn phải sửa số 680 thành 670. Khi đó, code trên sẽ trở thành

Code:: .recent {float: left; width:670px;} /*hiển thị recent topics, bạn phải chỉnh sửa chiều rộng 680px cho phù hợp với 4r*/

Các bạn thông cảm. Chịu khó edit tí. Tớ k có rành về CSS lắm nên chỉ thế được thôi mắc cỡ Chờ hand lên mà hỏi.
Javascript: Tạo 3 file javascript, đặt In the homepage nếu bạn đặt bảng thống kê chỉ ở trang chủ, đặt In all the pages nếu bạn đặt bảng thống kê ở mọi trang.

Code:: Link = '/search?search_author=*_*&search_keywords';
Start = '&start=';
Where = '';
Trang = 20;

$(function(){

op_choice = Math.floor(Math.random()*4);
OpChoice(op_choice);

$('.op-prew').click(function(){
op_choice -= 1;
if (op_choice < 0) op_choice = 3;
OpChoice(op_choice);
});
$('.op-next').click(function(){
op_choice += 1;
if (op_choice > 3) op_choice = 0;
OpChoice(op_choice);
});

$('#jumpbox-last select').clone().appendTo('#option-lastpost');
$('#option-lastpost select').removeAttr('name').removeAttr('onchange').attr('id','select-lastpost');

$('.op-last-bottom').click(function(){
$('.op-last-bottom').removeClass('op-last-bottom2');
$(this).addClass('op-last-bottom2');
});

$('#option-lastpost .op-last').click(function(){
$('#option-lastpost .op-last').removeClass('op-last2');
$('#select-lastpost').removeClass('op-last-select');
$(this).addClass('op-last2');
});

$('#select-lastpost').live('change',function(){
$('#option-lastpost .op-last').removeClass('op-last2');
$(this).addClass('op-last-select');
if ($(this).val()=='1')
{
Where = '';
LoadLastPost(0);
}
else if ($(this).val()!='-1')
{
Where = '&search_where='+$(this).val();
LoadLastPost(0);
}
});

$('.TrangTruoc').click(function(){
st = parseInt($('#SoTrangLT').val())-1;
$('#SoTrangLT').val(st);
LoadLastPost(st-1);
});

$('.TrangSau').click(function(){
st = parseInt($('#SoTrangLT').val())+1;
$('#SoTrangLT').val(st);
LoadLastPost(st-1);
});

$('#SoTrangLT').change(function(){
ltval = parseInt($(this).val());
if (ltval < 1 || ltval > 20)
{
$(this).val(1);
}
else
{
LoadLastPost(ltval-1);
}
});

});

function LoadLastPost(page){
page > 0 ? $('.TrangTruoc').show() : $('.TrangTruoc').hide();
if (page == 0){$('#SoTrangLT').val(1);}
LinkLastPost = Link + Where + Start + page*Trang;
$('#Load').show();
$('#dl-lastpost').load(LinkLastPost+' form.ipbform .ipbtable tr',function(){
$('#main-lastpost').empty();
$(this).find('tr').length < 20 ? $('.TrangSau').hide() : $('.TrangSau').show();
if ($(this).is(':empty'))
{
$('#main-lastpost').text('Không có dữ liệu');
}
else
{
$(this).find('tr').each(function(){
$('<div class="dl-post"></div>').appendTo('#main-lastpost');
$('<span class="lp1" title="'+$(this).find('td:eq(0)').text()+'"></span>').html($(this).find('td:eq(0)').html()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp2"></span>').html('<a class="thumbnail" title="'+$(this).find('td:eq(2) a.topictitle').text()+'" href="'+$(this).find('td:last a:last').attr('href')+'">'+$(this).find('td:eq(2) a.topictitle').text()+'</a>').appendTo('#main-lastpost .dl-post:last');
$('<span class="lp3" title="'+$(this).find('td:eq(4)').text()+'"></span>').html($(this).find('td:eq(4) a.gensmall')).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp4" title="'+$(this).find('td:eq(7)').text()+'"></span>').html($(this).find('td:eq(7) a.gensmall')).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp5" title="'+$(this).find('td:eq(3)').text()+'"></span>').html($(this).find('td:eq(3)').html()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp6" title="'+$(this).find('td:eq(5)').text()+'"></span>').html($(this).find('td:eq(5)').text()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp7" title="'+$(this).find('td:eq(6)').text()+'"></span>').html($(this).find('td:eq(6)').text()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp8" title="'+$(this).find('td:eq(1)').text()+'"></span>').html($(this).find('td:eq(1)').html()).appendTo('#main-lastpost .dl-post:last');
});
$('#dl-lastpost').empty();
}
$('#Load').fadeOut();
});
}

function OpChoice(eq){
$('#option-lastpost .op-choice').hide();
$('#option-lastpost .op-choice').filter(':eq('+eq+')').show();
}

function Op1Last(forum){
forum =='' ? Where = '' : Where = '&search_where='+forum;
LoadLastPost(0);
}

function Op2Last(op){
Link = op;
LoadLastPost(0);
}

$(function(){
$('#option-lastpost .op-last:first').addClass('op-last2');
LoadLastPost(0);
});

Code: Chọn nội dung CODE
$(function(){
$('#left .module:eq(0)').addClass('topposter').next().remove();
$('#left .module:eq(1)').addClass('hottest').next().remove();
$('#left .module:eq(1) a[href^="/t"]').addClass('topichot').next().remove();
$('#left .module:eq(2)').addClass('recent').next().remove();
$('#left .module:eq(2) br').addClass('clear');
});

Tạo 1 widget mới: Điền các thông tin như sau: () Widget name : Last mia mắc cỡ () Use a table type : Có () Widget title : Latest topics () Widget source :

Code:: <table border="0" class="lbb" cellpadding="0" cellspacing="0" width="100%"> <tr class="baiguicuoi" style="display: table-row; "> <td width="100%" valign="top" colspan="2"> <div id="Load"></div> <table style="background:#FFF repeat;" width="100%"> <tr> <td width="100%" valign="top"> <div id="name-lastpost"><span class="lp2">Tiêu đề</span><span class="lp3">Sáng lập</span><span class="lp4">Gửi cuối</span><span class="lp5">Chuyên mục</span><span class="lp6">Bình</span><span class="lp7">Xem</span></div> <div id="main-lastpost"></div> </td> </tr></table> </td> </tr> </table> </td></tr></table></td></tr> <tr><td> <div id="option2-lastpost"> <div class="op-last-bottom op-last-bottom2" onclick="Op2Last('/search?search_author=*_*&search_keywords')">Lastest</div> <div class="op-last-bottom" onclick="Op2Last('/search?search_id=newposts')">From last visit</div> <div class="op-last-bottom" onclick="Op2Last('/search?search_id=egosearch')">You have commented</div> <div class="op-last-bottom" onclick="Op2Last('/search?search_id=unanswered')">No comment</div> </div>
<select id="select-lastpost"> <option><div class="op-last" onclick="Op1Last('')">All</div></option><option value="-1"></option><option txt="01" value="f20">|--Cộng đồng game</option><option txt="01" value="f22">|--QTAN</option><option txt="01" value="f23">|--hot video youtube</option> </select>

<div id="trang-lastpost"> <div class="TrangTruoc" title="Tải dữ liệu trang trước"></div><div class="TrangHT"><input id="SoTrangLT" value="1" maxlength="2" title="Trang hiện tại" /></div><div class="TrangSau" title="Tải dữ liệu trang tiếp theo"></div> </div> <div id="dl-lastpost"></div> </div><div class="clear"></div> </td></tr> </table>

NOTE: Cái đoạn

Code:: <option><div class="op-last" onclick="Op1Last('')">All</div></option><option value="-1"></option><option txt="01" value="f20">|--Cộng đồng game</option><option txt="01" value="f22">|--QTAN</option><option txt="01" value="f23">|--hot video youtube</option>

các bạn viewsource đoạn jumbox của các bạn thay vào, sau đó tìm đoạn

Code:: <option value="-1">Chọn Diễn Đàn</option>

sửa thành

Code:: <option><div class="op-last" onclick="Op1Last('')">All đàn</div></option>

[/HIDE]
Cài đặt bài viết: QLTT Muiten Messages and email Muiten Chủ đề trong một trang: 20.<div class=fmvi-text>Thanks + Comment để thấy bài viết</div>
:3169671233:

» [Share] Lasttopic full thông tin cho invision
» Lasttopic dạng tab full thông tin cho invision
» Lasttopic lòng thòng 4all full thông tin
» [Invision]Last topic tiên phong cho Invision
» [Invision]Share viewtopic ngang dọc ver 1 ( style xenforo )

[Invision]Lasttopic Full

[Invision]Lasttopic Full

Similar topics

Similar topics