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

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

给自己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模板仅需一些HTML+CSS基础即可完成,如果不会可以用google搜索html教程或css教程

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

效果截图

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

模板代码,放入你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; top: 4px; right: 4px; border: 2px #fff solid; border-radius: 18px;}

更新记录

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

转载请注明转自:一极乐https://yijile.com/log/346.html


话题相关文章

话题标签

TypechoTypecho模版代码

一极乐 为乐趣而生

《给Typecho留言板添加一个带留言条数气泡的读者墙》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

有 23 条评论

  1. ccta ccta

    搞定,,,,,

  2. ccta ccta

    如何创建独立留言版页面,不知道怎么写入?不懂代码?博主能否告知一下,感觉博主留言板美哒哒[可怜]

  3. 不知子曰 不知子曰

    这个就是,放到模板就能看到效果哦
    因为插件的问题所以从本文拷贝出去代码不能用,现在更新了下,请看demo
    http://yijile.com/message/

  4. 不知子曰 不知子曰

    1.0可以的,可能是我编辑器换了插件,代码乱了,现在已经更新

  5. 不知子曰 不知子曰

    这个就是,放到模板就能看到效果哦
    因为升级所用文章代码出了点问题更新了下,请看demo
    http://yijile.com/message/

  6. 不知子曰 不知子曰

    这个就是,放到模板就能看到效果哦

  7. 不知子曰 不知子曰

    更新了下,请看demo

    http://yijile.com/message/

  8. 不知子曰 不知子曰

    这个就是,放到模板就能看到效果哦

  9. CCTA CCTA

    调用代码呢?

  10. 黄先生 黄先生

    这个效果不错 改天试试

添加新评论

captcha




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP