给Typecho留言板添加一个带留言条数气泡的读者墙

给Typecho留言板添加一个带留言条数气泡的读者墙.jpg

给自己typecho搭建的blog侧边或者留言板添加一个带读者留言次数气泡的读者墙。

模板代码,放入你typecho模板

1
<div id="reader">
2
<h2 class="module-title"><strong>读者风云榜</strong></h2>
3
<ul class="fno">
4
<?php
5
$period = time() - 999592000; // 時段: 30 天, 單位: 秒
6
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
7
->select('COUNT(author) AS cnt','author', 'url', 'mail')
8
->from('table.comments')
9
->where('created > ?', $period )
10
->where('status = ?', 'approved')
11
->where('type = ?', 'comment')
12
->where('authorId = ?', '0')
13
->group('author')
14
->order('cnt', Typecho_Db::SORT_DESC)
15
->limit('25')
16
);
17
$mostactive = '';
18
$avatar_path = 'http://cdn.v2ex.com/gravatar/';
19
foreach ($counts as $count) {
20
  $avatar = $avatar_path . md5(strtolower($count['mail'])) . '.jpg?s=60';
21
  $c_url = $count['url']; if ( !$c_url ) $c_url = Helper::options()->siteUrl;
22
  $mostactive .= "<li><a href='" . $c_url . "' title='" . $count['author'] . " (参与" . $count['cnt'] . "次探讨)' rel='nofollow' target='_blank'><img src='" . $avatar . "' alt='" . $count['author'] . "的照片' class='avatar' /><small>" . $count['author'] . "</small><i>" . $count['cnt'] . "</i></a></li>\n";
23
}
24
echo $mostactive; ?></ul> 
25
<!--end/.reader/--></div>

CSS样式部分 放入.css文件中

1
#reader {} 
2
#reader ul {list-style: none;} 
3
#reader li {padding: 1px 1px 0 0;float: left;height: auto;} 
4
#reader a {position: relative;float: left;display: block;text-align: center;text-decoration: none;} 
5
#reader a img{ width: 60px; height:60px;z-index: 0;border: 0;margin: 0;display: block;}  
6
#reader a small {line-height: 60px; font-size: 12px;padding: 8px 0 ; display: none; position: absolute;bottom: 0px;top:0px; left: 0px;right: 0px;z-index: 1;
7
background-color:rgba(255,255,255,0.72)!important; background:#fff; filter:alpha(opacity=72);   *background:#fff; *filter:alpha(opacity=72);color: #111;}
8
#reader a:hover small {display: block;}
9
#reader a i {font-size: 10px;font-style: normal; width: 18px; height: 18px;line-height: 18px; background-color: red;color: #fff;position: absolute;top: 1px;right: 1px;border: 2px #fff solid; border-radius: 18px;} 
10
.float-no{zoom: 1; }
11
.float-no:after{content: "\20"; display: block; height: 0; clear: both; visibility: hidden; }

修改typecho模板仅需一些HTML+CSS基础即可完成,如果不会可以用google搜索html教程或css教程

模板二 typecho读者墙页面单栏版 1000px宽

效果截图

typecho读者墙页面单栏版100px宽.jpg

模板代码,放入你typecho模板

1
<div id="reader">
2
<h2 class="module-title"><strong>读者风云榜</strong></h2>
3
<ul class="fno">
4
<?php
5
$period = time() - 999592000; // 時段: 30 天, 單位: 秒
6
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
7
->select('COUNT(author) AS cnt','author', 'url', 'mail')
8
->from('table.comments')
9
->where('created > ?', $period )
10
->where('status = ?', 'approved')
11
->where('type = ?', 'comment')
12
->where('authorId = ?', '0')
13
->group('author')
14
->order('cnt', Typecho_Db::SORT_DESC)
15
->limit('35')
16
);
17
$mostactive = '';
18
$avatar_path = 'http://cdn.v2ex.com/gravatar/';
19
foreach ($counts as $count) {
20
  $avatar = $avatar_path . md5(strtolower($count['mail'])) . '.jpg?s=125';
21
  $c_url = $count['url']; if ( !$c_url ) $c_url = Helper::options()->siteUrl;
22
  $mostactive .= "<li><a href='" . $c_url . "' title='" . $count['author'] . " (参与" . $count['cnt'] . "次探讨)' rel='nofollow' target='_blank'><img src='" . $avatar . "' alt='" . $count['author'] . "的照片' class='avatar' /><small>" . $count['author'] . "</small><i>" . $count['cnt'] . "</i></a></li>\n";
23
}
24
echo $mostactive; ?></ul> 
25
<!--end/.reader/--></div>

CSS样式部分 放入.css文件中

1
#reader {} 
2
#reader ul {list-style: none; margin: 0 -9px;} 
3
#reader li {padding: 1px 1px 0 0; float: left; } 
4
#reader a {position: relative; display: block; margin: 9px; text-align: center; text-decoration: none;} 
5
#reader a img{ width: 125px; height:125px;z-index: 0;border: 0;margin: 0;display: block;}  
6
#reader a small {line-height: 125px; font-size: 12px;padding: 8px 0 ; display: none; position: absolute;bottom: 0px;top:0px; left: 0px;right: 0px;z-index: 1;
7
background-color:rgba(255,255,255,0.72)!important; background:#fff; filter:alpha(opacity=72);   *background:#fff; *filter:alpha(opacity=72);color: #111;}
8
#reader a:hover small {display: block;}
9
#reader a i {font-size: 10px; font-style: normal; width: 38px; height: 18px; line-height: 18px; background-color: #F56763; color: #fff; position: absolute; top: 4px; right: 4px; border: 2px #fff solid; border-radius: 18px;}

更新记录

更新模板二100px单栏演示模板函数及CSS(2015-11-15)