给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留言板添加一个带留言条数气泡的读者墙》  发表时间:  最后更新时间:

谁来过

寒叶邀请你对本文不足说出你的看法!

有 19 条评论

  1. 梁兴健 梁兴健

    老哥,怎么把头像的Http链接换成https的呢

    1. 寒叶 寒叶

      找到可以用https gravatar镜像,然后改掉地址就好

  2. 梁兴健 梁兴健

    谢谢博主,我成功把代码加上了

  3. 友链博客 友链博客

    真的太棒了,找了好久终于找到能用的了

  4. devoted devoted

    大师啊,小弟膜拜,回头按照教程搞了去

  5. ccta ccta

    搞定,,,,,

  6. 寒叶 寒叶

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

  7. CCTA CCTA

    调用代码呢?

    1. 寒叶 寒叶

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

      1. ccta ccta

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

    2. 寒叶 寒叶

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

    3. 寒叶 寒叶

      更新了下,请看demo

      http://yijile.com/message/

    4. 寒叶 寒叶

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

  8. 黄先生 黄先生

    这个效果不错 改天试试

  9. 吴尼玛 吴尼玛

    1.0表示不行

    1. 寒叶 寒叶

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

    2. 寒叶 寒叶

      可以的,我就1.0看我留言板

    3. 寒叶 寒叶

      醉了,,估计typecho1.0很多 9.0的写法都不行了

  10. 米特网 米特网

    好久没研究typecho了。

添加新评论

captcha




博主推荐专题

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


关闭

标签云

一极乐 衷心接受你的建议

TOP