加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 在线留言 | RSS
成网科技业务包括域名空间企业网站制作
 
国际域名com/net/org仅售80元/年
1G独立空间(PHP+MYSQL)仅售600元/年
您当前的位置:首页 > 技术交流 > CMS教程 > 其他程序

Typecho CSS3个性留言板之读者墙页面的实现方法

时间:2015-08-29 12:19:33  来源:互联网  作者:佚名  点击:

这篇文章主要介绍了Typecho CSS3个性留言板读者墙页面的添加方法,需要的朋友可以参考下效果图如下:zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
看到文章的首图相信大家都不陌生,可能其他博客的读者墙或者留言薄页面都见过,挺简约的真实记录博客的访客,留下的足迹,便于回访,这也算是博客里面互动的一个重要依据或者途径,下面就来说说在Typecho下该如何实现这麽个性的访问记录: zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
首先、把下面代码粘贴到当前主题的functions.php页面 zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
PHP Code复制内容到剪贴板
  1. //获得读者墙   
  2. function getFriendWall()      
  3. {      
  4.     $db = Typecho_Db::get();      
  5.     $sql = $db->select('COUNT(author) AS cnt''author''url''mail')      
  6.               ->from('table.comments')      
  7.               ->where('status = ?''approved')      
  8.               ->where('type = ?''comment')      
  9.               ->where('authorId = ?''0')      
  10.               ->where('mail != ?''admin@ben-lab.com')   //排除自己上墙   
  11.               ->group('author')      
  12.               ->order('cnt', Typecho_Db::SORT_DESC)      
  13.               ->limit('15');    //读取几位用户的信息     
  14.     $result = $db->fetchAll($sql);      
  15.     
  16.     if (count($result) > 0) {      
  17.         $maxNum = $result[0]['cnt'];      
  18.         foreach ($result as $value) {      
  19.             $mostactive .= '<li><a target="_blank" rel="nofollow" href="' . $value['url'] . '"><span class="pic" style="background: url(http://1.gravatar.com/avatar/'.md5(strtolower($value['mail'])).'?s=36&d=&r=G) no-repeat; "></span><em>' . $value['author'] . '</em><strong>+' . $value['cnt'] . '</strong><br />' . $value['url'] . '</a></li>';          
  20.         }      
  21.         echo $mostactive;      
  22.     }      
  23. }  

zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
其次、在主題目錄裏新建一個guestbook.php,粘貼以下代碼,當然,新建頁面的名稱可以自己填寫,本篇是以guestbook為例,你懂的 zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

复制代码代码如下:zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<?php zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
/** zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
* 自定义页面模板zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
* zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
* @package custom zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
*/ zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
?> zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

第三、打开当前主题的page.php,复制全部代码.然后粘贴到guestbook.php,接著其次那步下面的代码zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

第四、替换代码,搜索下面代码替换成再下面内容zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设


复制代码代码如下:zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<?php $this->content(''); ?> zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

替换成zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设


复制代码代码如下:zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<div id="list-post"> zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<ul class='readers-list'> zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
<?php getFriendWall(); ?> zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
</ul></div> zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

第五、打开主题的style.css,粘贴以下代码zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设


复制代码代码如下:zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list {line-height:16px;text-align:left;_zoom:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-o-text-}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list li{width:180px;float:left;*margin-right:-1px;list-style:none;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list a,.readers-list a:hover strong{background-color:#f2f2f2;background-image:-webkit-linear-gradient(#f8f8f8,#f2f2f2);background-image:-moz-linear-gradient(#f8f8f8,#f2f2f2);background-image:linear-gradient(#f8f8f8,#f2f2f2);}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list a{position:relative;display:block;height:30px;margin:4px;padding:2px 4px 2px 44px;color:#999;overflow:hidden;border:#ccc 1px solid;border-radius:2px;box-shadow:#eee 0 0 2px;font-size:10px;line-height:14px;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list .pic,.readers-list em,.readers-list strong{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;transition:all .2s ease-out;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list .pic{width:30px;height:30px;float:left;margin:0 8px 0 -40px;border-radius:2px;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list em{color:#666;font-style:normal;margin-right:10px;font:bold 12px/16px microsoft yahei;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list strong{color:#ddd;width:34px;text-align:right;position:absolute;right:6px;top:4px;font:bold 14px/16px microsoft yahei;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list a:hover{border-color:#bbb;box-shadow:#ccc 0 0 2px;background-color:#fff;background-image:none;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list a:hover .pic{opacity:.6;margin-left:0;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list a:hover em{color:#EE8B17;font:bold 12px/36px microsoft yahei;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
.readers-list a:hover strong{color:#EE8B17;right:134px;top:0;text-align:center;border-right:#ccc 1px solid;height:34px;line-height:34px;}zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设
zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

第六、新建页面或者编辑你的读者墙页面,点击底部高级选项,在自定义模版选择"自定义页面模版"发布即可!zr3成网科技_开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设

成网科技 www.it28.com竭诚为您服务!
开平网站建设_开平网站制作_开平企业网站_开平网页设计_江门网站建设_成网科技

更多
 


来顶一下
返回首页
返回首页
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
推荐资讯
相关文章
栏目更新
栏目热门