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

本教程主要教你如何不用插件给你的 Typecho 博客blog侧边或者留言板添加一个带读者留言次数气泡的读者墙。

具体效果看下图：

模板代码，放入你typecho模板

<div id="reader">
<h2 class="module-title"><strong>读者风云榜</strong></h2>
<ul class="fno">
<?php
$period = time() - 999592000; // 時段: 30 天, 單位: 秒
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
->select('COUNT(author) AS cnt','author', 'url', 'mail')
->from('table.comments')
->where('created > ?', $period )
->where('status = ?', 'approved')
->where('type = ?', 'comment')
->where('authorId = ?', '0')
->group('author')
->order('cnt', Typecho_Db::SORT_DESC)
->limit('25')
);
$mostactive = '';
$avatar_path = 'http://cdn.v2ex.com/gravatar/';
foreach ($counts as $count) {
  $avatar = $avatar_path . md5(strtolower($count['mail'])) . '.jpg?s=60';
  $c_url = $count['url']; if ( !$c_url ) $c_url = Helper::options()->siteUrl;
  $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";
}
echo $mostactive; ?></ul> 
<!--end/.reader/--></div>  

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

#reader {} 
#reader ul {list-style: none;} 
#reader li {padding: 1px 1px 0 0;float: left;height: auto;} 
#reader a {position: relative;float: left;display: block;text-align: center;text-decoration: none;} 
#reader a img{ width: 60px; height:60px;z-index: 0;border: 0;margin: 0;display: block;}  
#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;
background-color:rgba(255,255,255,0.72)!important; background:#fff; filter:alpha(opacity=72);   *background:#fff; *filter:alpha(opacity=72);color: #111;}
#reader a:hover small {display: block;}
#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;} 
.float-no{zoom: 1; }
.float-no:after{content: "\20"; display: block; height: 0; clear: both; visibility: hidden; }

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

效果截图

模板代码，放入你typecho模板

<div id="reader">
<h2 class="module-title"><strong>读者风云榜</strong></h2>
<ul class="fno">
<?php
$period = time() - 999592000; // 時段: 30 天, 單位: 秒
$counts = Typecho_Db::get()->fetchAll(Typecho_Db::get()
->select('COUNT(author) AS cnt','author', 'url', 'mail')
->from('table.comments')
->where('created > ?', $period )
->where('status = ?', 'approved')
->where('type = ?', 'comment')
->where('authorId = ?', '0')
->group('author')
->order('cnt', Typecho_Db::SORT_DESC)
->limit('35')
);
$mostactive = '';
$avatar_path = 'http://cdn.v2ex.com/gravatar/';
foreach ($counts as $count) {
  $avatar = $avatar_path . md5(strtolower($count['mail'])) . '.jpg?s=125';
  $c_url = $count['url']; if ( !$c_url ) $c_url = Helper::options()->siteUrl;
  $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";
}
echo $mostactive; ?></ul> 
<!--end/.reader/--></div>  

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

#reader {} 
#reader ul {list-style: none; margin: 0 -9px;} 
#reader li {padding: 1px 1px 0 0; float: left; } 
#reader a {position: relative; display: block; margin: 9px; text-align: center; text-decoration: none;} 
#reader a img{ width: 125px; height:125px;z-index: 0;border: 0;margin: 0;display: block;}  
#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;
background-color:rgba(255,255,255,0.72)!important; background:#fff; filter:alpha(opacity=72);   *background:#fff; *filter:alpha(opacity=72);color: #111;}
#reader a:hover small {display: block;}
#reader a i {font-size: 10px; font-style: normal; width: 38px; height: 18px; line-height: 18px; background-color: #F56763; color: #fff; position: absolute; 

如果你不会代码，或者怕代码出错，你也可以选择本站之前分享过得两个读者墙插件：Typecho 读者墙头像缓存插件 Avatars和Typecho 读者墙插件 Viewers。

本文转载自：http://yijile.com/log/346.html