Kênh thông tin giải trí dành cho giới trẻ
Tự động đăng nhập lần sau
Toàn bộ
Đại sảnh
Du lịch VĐ
Làm quen
Thư viện
Thư giãn
Trường xưa
Âm nhạc
Phim ảnh
Thời trang
Cuộc sống
Tâm sự
Chém gió
Năng khiếu
DJ-Club
Bang hội
CLB
Đố vui
Trò chơi
Tin tức
Kỳ thú
Tin học
Ảnh đẹp
Học tập
Linh tinh
Tiêu đềSáng lậpGửi cuốiChuyên mụcBìnhXem
Bài gửi sau cùng
Bài mới trong thời gian

You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

 Trùm Forum

Admin

avatar
Trùm Forum


Demo:



[You must be registered and logged in to see this image.]

- Hướng dẫn

- Vào Overall header tìm:

Code:
<div id="main">

- Thêm vào phía trên code sau:

Code:
 
 
<div id="Load"></div>
<div id="last-posts">
  <div id="option-lastpost">
    <div class="op-last" onclick="Op1Last('')">Toàn bộ</div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('c1')">Đại sảnh</div>
      <div class="op-last" onclick="Op1Last('c2')">Du lịch VĐ</div>
      <div class="op-last" onclick="Op1Last('f60')">Làm quen</div>
      <div class="op-last" onclick="Op1Last('f156')">Thư viện</div>
      <div class="op-last" onclick="Op1Last('f16')">Thư giãn</div>
      <div class="op-last" onclick="Op1Last('f117')">Trường xưa</div>
    </div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('f13')">Âm nhạc</div>
      <div class="op-last" onclick="Op1Last('f14')">Phim ảnh</div>
      <div class="op-last" onclick="Op1Last('f59')">Thời trang</div>
      <div class="op-last" onclick="Op1Last('f198')">Cuộc sống</div>
      <div class="op-last" onclick="Op1Last('f85')">Tâm sự</div>
      <div class="op-last" onclick="Op1Last('f80')">Chém gió</div>
    </div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('f63')">Năng khiếu</div>
      <div class="op-last" onclick="Op1Last('f53')">DJ-Club</div>
      <div class="op-last" onclick="Op1Last('f239')">Bang hội</div>
      <div class="op-last" onclick="Op1Last('f62')">CLB</div>
      <div class="op-last" onclick="Op1Last('f15')">Đố vui</div>
      <div class="op-last" onclick="Op1Last('f17')">Trò chơi</div>
    </div>
    <div class="op-choice">
      <div class="op-last" onclick="Op1Last('f157')">Tin tức</div>
      <div class="op-last" onclick="Op1Last('f84')">Kỳ thú</div>
      <div class="op-last" onclick="Op1Last('f92')">Tin học</div>
      <div class="op-last" onclick="Op1Last('f158')">Ảnh đẹp</div>
      <div class="op-last" onclick="Op1Last('f121')">Học tập</div>
      <div class="op-last" onclick="Op1Last('c8')">Linh tinh</div>
    </div>
    <div class="op-change"><div class="op-prew"></div><div class="op-next"></div></div>
  </div>
  <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>
  <div id="option2-lastpost">
    <div class="op-last-bottom op-last-bottom2" onclick="Op2Last('/search?search_author=%%%&search_keywords')">Bài gửi sau cùng</div>
    <div class="op-last-bottom" onclick="Op2Last('/search?search_id=newposts')">Bài từ lần truy cập trước</div>
    <div class="op-last-bottom" onclick="Op2Last('/search?search_id=egosearch')">Bài bạn đã tham gia thảo luận</div>
    <div class="op-last-bottom" onclick="Op2Last('/search?search_id=unanswered')">Bài chưa ai trả lời</div>
  </div>
  <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>

- Thêm vào CSS:

Code:
#last-posts{width:100%;}
#select-lastpost{float:right;cursor:pointer;}
#option-lastpost{height:18px;}
 
.op-last{float:left;border:1px solid #999;padding:2px 0;cursor:pointer;height:18px;background-color:white;margin:-5px 2px 0;width:80px;text-align:center;background-color:#DDD;}
.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{border: 3px dashed white;float:left;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:red;}
.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{padding:20px 10px 5px;background-color:white;height:235px;}
#dl-lastpost{display:none;}
#name-lastpost,.name-lastpost {
position: absolute;
padding: 5px 25px;
font-style: italic;
}
 
.dl-post {
height: 15px;
}
lp1,.lp2,.lp3,.lp4,.lp5,.lp6,.lp7,.lp8,.imglp{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: absolute;
}
.dl-post:hover{
background-color:#DDD;
}
 
.lp1 img {
height: 14px;
}
.lp2 {
margin-left: 10px;
width: 247px;
}
.lp3 {
margin-left: 300px;
width: 80px;
}
.lp4 {
margin-left: 420px;
width: 80px;
}
.lp5 {
margin-left: 535px;
width: 100px;
}
.lp6 {
margin-left: 670px;
font-style: italic;
}
.lp7 {
margin-left: 720px;
font-style: italic;
}
.lp8 {
margin-left: 940px;
}
.imglp {
margin-left: 780px;
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;text-align:center;font-weight:bold;border:3px dashed white;}
#SoTrangLT:hover{border:3px dashed black;color:red;}
 
#Load {
display:none;
background:#FFF url(https://lh6.googleusercontent.com/-w4Vs9guhNLU/T-IAGnUJxaI/AAAAAAAAARk/GadFsuw8-ec/h120/loading.gif) 50% 50% no-repeat;
position:fixed;
left:50%;
top:40%;
width:50px;
height:50px;
border:20px solid rgba(0, 13, 255, .3);
border-radius:50px;
margin-left:-25px;
}

+ Các bạn đặt lần lượt JS vào Modules ---> HTML & JAVASCRIPT ---> Javascript codes management .

Đoạn 1
- Title * : Tùy đặt
- Placement : In all the pages

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.frm-form .main-content .table .statused tr',function(){
$('#main-lastpost').empty();
$(this).find('tr').length < 15 ? $('.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"></span>').html($(this).find('span.status').html()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp2" title="'+$(this).find('td:first h2.topic-title').text()+'"></span>').html('<a href="'+$(this).find('td:last a:last').attr('href')+'">'+$(this).find('td:first h2.topic-title').text()+'</a>').appendTo('#main-lastpost .dl-post:last');
$(this).find('td:first a.gensmall').appendTo('#main-lastpost .dl-post:last').wrap('<span class="lp3"></span>');
$(this).find('td:eq(4) a.gensmall').appendTo('#main-lastpost .dl-post:last').wrap('<span class="lp4"></span>');
$('<span class="lp5"></span>').html($(this).find('td:eq(1)').html()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp6"></span>').html($(this).find('td:eq(2)').text()).appendTo('#main-lastpost .dl-post:last');
$('<span class="lp7"></span>').html($(this).find('td:eq(3)').text()).appendTo('#main-lastpost .dl-post:last');
$('<img src="http://illiweb.com/fa/m/icon_minitime1.gif" class="imglp" title="'+$(this).find('td:eq(4)').text().replace(' by','')+'"></img>').appendTo('#main-lastpost .dl-post:last');
if ($(this).find('td:first img[alt*="posted in this topic"]').length)
{
$('<span class="lp8"><img src="'+$(this).find('td:first img[alt*="posted in this topic"]').attr('src')+'" title="Bạn đã tham gia thảo luận tại chủ đề này"></img></span>').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);
}

Đoạn 2
- Title * : Tùy đặt
- Placement : In all the pages

Code:
$(function(){
 
$('#select-lastpost option').each(function(){
if ($(this).text().search(/\|\s\s\s\|--/) == 0){$(this).addClass('select-intopic');}
});
 
sl_op = $('#select-lastpost option.select-intopic').length;
ClickLast = Math.floor(Math.random()*sl_op);
$('#select-lastpost option.select-intopic').filter(':eq('+ClickLast+')').attr('selected', 'selected');
$('#select-lastpost').addClass('op-last-select');
Where = '&search_where='+$('#select-lastpost').val();
LoadLastPost(0);
 
});

Đoạn 3
- Title * : Tùy đặt
- Placement : In the topic

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

Xong !
Hướng dẫn thêm :

- Last chỉ cho hiện ở index_body nên đã xóa 1 vài tabs để gọn hơn . Nếu bạn nào thích thì hãy làm theo hướng dẫn thêm sau đây:

Bước 1:
- Chúng ta sẽ lấy đoạn đặt ở header xóa đi và cho vào dưới

Code:
{JAVASCRIPT}

Bước 2:
- Để xóa tabs các bạn tìm đoạn:

Code:
 <div id="option-lastpost">
...
 <div class="op-change"><div class="op-prew"></div><div class="op-next"></div></div>

Xóa đi là xong !

- Không cài đặt widget nếu có bật nhớ tắt tránh bị đè tên
- Quản lý tổng thể ---> Messages and e-mails ---> Cấu hình diễn đàn ---> Chủ đề trong 1 trang : 15
- Nếu ai để số bài nhiều hơn các bạn chỉnh lại trong css chiều cao last cho phù hợp ở đoạn này
Code:
#main-lastpost{padding:20px 10px 5px;background-color:white;height:235px;}
- Thay " height:235px; " tăng cao lên là được

Nguồn: Chinhphuc



[You must be registered and logged in to see this link.]

[You must be registered and logged in to see this image.]
Xem lý lịch thành viên http://xteenvn.forum-viet.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết