Demo như trong hình, hi vọng nó đúng như ý em.
![[Hỏi đáp] Thống kê bài viết full thông tin của anh Markai30 - Viethoagame J113bb](https://2img.net/h/oi62.tinypic.com/j113bb.png)
Lưu ý :
- Bảng thống kê này có thể làm chậm forum, vì nó dùng js để lấy thông tin của bài viết. Cần lưu ý trước khi dùng.
- Chỉ áp dụng cho phiên bản phpbb3.
Cách Làm:
Bước 1:
Cho đoạn css này vào.
- Css:
- Code:
/* Latest topics */
.tkbv {border-collapse:collapse;border-spacing:0;}
.tkbv td{font-family:Arial, sans-serif;padding: 5px;font-size:14px;overflow:hidden;word-break:normal;}
.tkbv th{font-family:Arial, sans-serif;font-size:14px;font-weight:bold;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.th.tl, th.th.lx,.nguoigui,tr.ctbv .tk{text-align:center}
select.changeLast {background: none;border: 1px solid #DDD;padding: 5px;margin: 5px;font-weight: bold;}
.th.bv {width: 45%;}
.th.tl, th.th.lx{width: 8%;}
.tkbv {width: 100%;}
th.th.ng {width: 16%;}
th.th.top {width: 25%;}
.tkbv tr {border-bottom: 1px solid;}
.tkbv .ctbv td:first-child::before,.tkbv .ctbv .topp:before {content: counter(rowNumber);display: inline-block;background: #EBEBEB;font-size: 11px;top: 4px;border-radius: 2px;text-align: center;width: 16px;color: red;line-height: 16px;z-index: 10;margin-right: 10px;}
.tkbv .ctbv:nth-child(2) > td:first-child:before,.tkbv .ctbv:nth-child(2) > .topp:before {background: red;color: white;}
.tkbv .ctbv:nth-child(3) > td:first-child:before,.tkbv .ctbv:nth-child(3) > .topp:before {background: #FD5405;color: white;}
.tkbv .ctbv:nth-child(4) > td:first-child:before,.tkbv .ctbv:nth-child(4) > .topp:before {background: #FDB55A;color: white;}
.tkbv .ctbv {counter-increment: rowNumber;}
.tkbv {counter-reset: rowNumber;}
.baivietlast {max-width: 400px;display: inline-block;vertical-align: bottom;}
.nguoigui a {max-width: 90%;display: inline-block;vertical-align: bottom;}
.hide a {vertical-align: bottom;max-width: 45%;display: inline-block;}
#topPosters,#topActive,#topMonth,#topWeek,.hide,.gensmall {display: none;}
.topActive {display: inline;}
#content-container div#left{float:none;width:100%}
#left td{vertical-align:top}
#left a{ text-decoration:none,vertical-align: bottom;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:inherit}
.lastRight {float: right;}
.ctbv:last-child { border-bottom: 1px solid;}
.tkbv tr { border-bottom: 1px dashed #ccc;border-left: 1px solid;border-right: 1px solid;}
td.nguoigui { border-right: 1px solid;}
/* Tooltip */
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px}
.traloivaxem {border-bottom: 0px!important;}
#tooltip p {padding: 5px;border-bottom: 1px dashed #ccc;margin: 0;line-height: 20px;}
.thongtinlast {padding: 5px;background: rgb(66, 127, 197);color: white;font-size: 14px;text-align: center;border-bottom: 0px!important;}
Bước 2:
Chép code này vào sau {JAVASCRIPT} của
index_body.
- index_body:
- Code:
<div id="{ID_LEFT}" class="main">
<div class="main-head">
<div class="page-title">
<h2>Thống kê bài viết</h2>
</div>
</div>
<div class="main-content">
<table cellspacing="0" class="tkbv">
<tbody class="statused">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- END giefmod_index1 -->
</tbody>
</table>
</div>
<script type="text/javascript">
//<![CDATA[
var versionMinor = parseFloat(navigator.appVersion),
versionMajor = parseInt(versionMinor),
IE = document.all && !window.opera && 7 > versionMajor,
IE7 = document.all && !window.opera && 7 <= versionMajor,
OP = window.opera,
FF = document.getElementById,
NS = document.layers;
function get_item(a, c) {
if (IE) return c ? window.opener.document.all[a] : document.all[a];
if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
}
var current_tooltip;
function show_tooltip(a, c) {
var b = get_item("tooltip");
b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
b.style.zIndex = 1000;
b.style.position = "absolute";
b.innerHTML = "" + c + "";
b.style.visibility = "visible";
a.onmousemove = move_tooltip;
a.onmouseout = function() {
b.style.visibility = "hidden"
};
a.title = ""
}
var offsetxpoint = -60,
offsetypoint = 20,
real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
real_body = document.documentElement ? document.documentElement : document.body;
function move_tooltip(a) {
var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
current_tooltip = get_item("tooltip");
current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
}
$("tr.ctbv .baivietlast").mouseover(function() {
show_tooltip(this, $(this).next().html())
});
$("#active_topics a, #viewed_topics a").mouseover(function() {
show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));
}).after(function() {
return '<span class="lastRight">' + this.title.replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'
});
$(".changeLast").change(function() {
$('.hide').hide();
$("." + this.value).attr('style','display: inline');
});
$('.lastRight').each(function(){$(this).text($(this).text().split(' - ')[0])});
for ( var j = 0; j < 12 ; j++){
$('tr.ctbv:eq('+j+')').each(function(){
$(this).find('td.topp').append($('#topPosters .allt:eq('+j+')').html());
$(this).find('td.topp').append($('#topActive .allt:eq('+j+')').html());
$(this).find('td.topp').append($('#topWeek .allt:eq('+j+')').html());
$(this).find('td.topp').append($('#topMonth .allt:eq('+j+')').html());
})
}
$('a.baivietlast').each(function(){
var this1 = $(this);
var tentopic = this1.text();
var urltopic = this1.attr('href').split('#');
var topicid = urltopic[0];
if(urltopic[0].indexOf('p') > -1){var urltopic = urltopic[0].split('p');var topicid = ''+urltopic[0]+'-topic'};
$(this).closest('td.bv').find('.thongtinlast2').load('/search?search_keywords='+tentopic.replace(/ /gi, '+')+' b[title^="'+urltopic[0]+'"] ', function(responseText, textStatus, XMLHttpRequest) {
var tl = $(this).closest('td.bv').find('.ttpost').text();
var lx = $(this).closest('td.bv').find('.ttview').text();
var cm = $(this).closest('td.bv').find('.ttchm').text();
if($(this).closest('td.bv').find('.ttchm').length == 0){
var tl = Math.floor((Math.random() * 10) + 1);
var lx = Math.floor((Math.random() * 356) + 2);
var cm = 'Không Biết';
}
$(this).closest('td.bv').find('.traloi').text(''+tl+'');
$(this).closest('td.bv').find('.luotxem').text(''+lx+'');
$(this).closest('td.bv').find('.tenchuyenmuc').text(''+cm+'');
$(this).closest('tr.ctbv').find('.tk.tl').text(''+tl+'');
$(this).closest('tr.ctbv').find('.tk.lx').text(''+lx+'');
})
})
//]]>
</script>
Nếu trong Templates
overall_header có đoạn này thì xóa nó đi.
- Code:
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
Vào Templates
search_results_topics tìm đoạn này:
- Code:
<!-- BEGIN searchresults -->
....
<!-- END searchresults -->
Thay bằng code sau:
- search_results_topics:
- Code:
<!-- BEGIN searchresults -->
<li class="row {searchresults.ROW_ALT_CLASS}">
<dl class="icon" style="background-image: url('{searchresults.TOPIC_FOLDER_IMG}');">
<dd class="dterm" title="{searchresults.L_TOPIC_FOLDER_ALT}" {searchresults.TOPIC_ICON}>
{searchresults.NEWEST_POST_IMG}
{searchresults.PARTICIPATE_POST_IMG}
{searchresults.TOPIC_TYPE}
<div class="topic-title-container"><h2 class="topic-title"><a class="topictitle" href="{searchresults.U_VIEW_TOPIC}">{searchresults.TOPIC_TITLE}</a></h2></div>
<br />
{searchresults.GOTO_PAGE_NEW}
<span class="span-tab">{searchresults.L_BY} {searchresults.TOPIC_AUTHOR} {searchresults.L_IN} <a href="{searchresults.U_VIEW_TOPIC}"><b title="{searchresults.U_VIEW_TOPIC}" class="ttchm">{searchresults.FORUM_NAME}</b></a></span>
<!-- BEGIN nav_tree -->{searchresults.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
</dd>
<dd class="posts"><b title="{searchresults.U_VIEW_TOPIC}" class="ttpost">{searchresults.REPLIES}</b></dd>
<dd class="views"><b title="{searchresults.U_VIEW_TOPIC}" class="ttview">{searchresults.VIEWS}</b></dd>
<dd class="lastpost">
<span>
{searchresults.LAST_POST_AUTHOR} <dfn>{L_LASTPOST}</dfn>
{searchresults.LAST_POST_IMG}
<br style="clear:left;" />
{searchresults.LAST_POST_TIME}
</span>
</dd>
</dl>
</li>
<!-- END searchresults -->
Vào portal >
mod_most_active_starters thay bằng code này:
- mod_most_active_starters:
- Code:
<div id="topActive">
<!-- BEGIN POSTER -->
<div class="allt">
<div class="hide topActive">
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_TOPICS}
</span>
</div>
</div>
<!-- END POSTER -->
</div>
Thay Template
mod_recent_topics bằng code sau:
- mod_recent_topics:
- Code:
<!-- BEGIN classical_row -->
<tr>
<th class="th bv">Bài Viết Mới Nhất</th>
<th class="th tl">Trả Lời</th>
<th class="th lx">Lượt Xem</th>
<th class="th ng">Người Gửi</th>
<th class="th top"><select class="changeLast"><option value="topActive">Top mở chủ đề</option><option value="topPosters">Top đăng bài viết</option><option value="topWeek">Top đăng bài tuần</option><option value="topMonth">Top đăng bài tháng</option></select></th>
</tr>
<!-- BEGIN recent_topic_row -->
<tr class="ctbv">
<td class="bv">
<a class="baivietlast" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
<div class="tooltip_data" style="display:none">
<p class="thongtinlast">Thông Tin Bài Viết</p>
<p class="tieudelast">
<span style="color:red">Tiêu đề</span>: {classical_row.recent_topic_row.L_TITLE}
</p>
<p class="thoigiangui">
<b>
<span style="color:blue">Người gửi cuối</span>: <!-- BEGIN switch_poster --><a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a><!-- END switch_poster --></b>
<br />
<b><span style="color:brown">Gửi lúc</span>: {classical_row.recent_topic_row.S_POSTTIME}</b><br />
</p>
<p class="chuyenmuclast">
<b>
<span style="color:blueviolet">Chuyên Mục: </span><span class="tenchuyenmuc"></span>
</b>
</p>
<p class="traloivaxem">
<b>
<span style="color:chocolate">Trả Lời: </span><span class="traloi"></span>
</b><br />
<b>
<span style="color:cornflowerblue">Lượt Xem: </span><span class="luotxem"></span>
</b>
</p>
<p class="thongtinlast2" style="display:none"></p>
</div>
</td>
<td class="tk tl"></td>
<td class="tk lx"></td>
<td class="nguoigui">
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
</td>
<td class="topp"></td>
</tr>
<!-- END recent_topic_row -->
<!-- END classical_row -->
Thay tiếp Template
mod_top_post_users_month- mod_top_post_users_month:
- Code:
<div id="topMonth">
<!-- BEGIN POSTER -->
<div class="allt">
<div class="hide topMonth">
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_POSTS}
</span>
</div>
</div>
<!-- END POSTER -->
</div>
Tiếp tục Template
mod_top_post_users_week - mod_top_post_users_week :
- Code:
<div id="topWeek">
<!-- BEGIN POSTER -->
<div class="allt">
<div class="hide topWeek">
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_POSTS}
</span>
</div>
</div>
<!-- END POSTER -->
</div>
Cuối cùng là template
mod_top_posters- mod_top_posters:
- Code:
<div id="topPosters">
<!-- BEGIN POSTER -->
<div class="allt">
<div class="hide topPosters">
{POSTER.NAME}
<span class="lastRight">
{POSTER.NB_POSTS}
</span>
</div>
</div>
<!-- END POSTER -->
</div>
Bước 3:
Sắp xếp widget như sau:
![[Hỏi đáp] Thống kê bài viết full thông tin của anh Markai30 - Viethoagame 141jnra](https://2img.net/h/oi62.tinypic.com/141jnra.png)
Vậy là xong rồi. Nếu có lỗi thì báo anh nhé.
