阿里云服务器

zblog模板制作中常常要在首页添加一个读者墙的功能,吸引更多的网友来交流。

下面我来教大家

YT.CMS插件实现读者墙的功能,又可以少安装一个插件了!
是不是很给力啊!!!只是放在静态页需要重建才可以,此问题有待解决!
实现代码:

XML/HTML代码
  1. <YT:Cmd DataSource="select top 18 * from (select comm_Email,comm_HomePage,comm_Author,count(*) as comm_Sum from blog_Comment group by comm_Email,comm_HomePage,comm_Author order by count(*) desc)">  

  2. 名称 <#eval/row(2)#>  

  3. 网址 <#eval/row(1)#>  

  4. 邮箱md5 <#eval/MD5(row(0))#>  

  5. 评论数 <#eval/row(3)#>  

  6. </YT>  

其中 数字 18 为调用的条数!其它的在代码中都有所介绍!
下面给大家讲个实例!就是在loper1.3里面的侧边栏读者墙效果!
首先将下面的html代码加入到页面中

XML/HTML代码
  1. <h3>读者墙</h3>  

  2. <div class="sub-greater">  

  3. <YT:Cmd DataSource="select top 12 * from (select comm_Email,comm_HomePage,comm_Author,count(*) as comm_Sum from blog_Comment group by comm_Email,comm_HomePage,comm_Author order by count(*) desc)">  

  4. <a target="_blank" href="<#eval/row(1)#>"><span class="pic"><img src="https://www.gravatar.com/avatar.php?gravatar_id=<#eval/MD5(row(0))#>"></span><span class="num"><#eval/row(3)#></span><span class="name"><#eval/row(2)#></span></a>  

  5. </YT>  

  6. </div>  

然后再加入下面的CSS代码

XML/HTML代码
  1. .sub-greater{width:270px;}  

  2. .sub-greater a{width:36px;height:36px;display:block;float:left;position:relative;margin:0 8px 8px 0}  

  3. .sub-greater .pic{position:absolute;top:0;left:0;z-index:100;width:36px;height:36px;display:block;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;}  

  4. .sub-greater .pic img{border-radius:4px; width:36px; height:36px}  

  5. .sub-greater .num{position:absolute;top:0;left:0;z-index:99;width:34px;height:34px;line-height:34px;color:#e02523;font-size:18px;font-weight:bold;display:block;background-color:#fff;text-align:center;border:#bbb 1px solid;-webkit-transform:rotatey(-180deg);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;border-radius:4px}  

  6. .sub-greater .name{position:absolute;top:0;left:0;color:#333;display:block;width:1px;height:1px;overflow:hidden;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;text-align:center}  

  7. .sub-greater a:hover .pic{z-index:100;border-color:#eee;-webkit-transform:rotatey(180deg);-moz-transform:rotatey(180deg)}  

  8. .sub-greater a:hover .num{z-index:101;-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);opacity:.8}  

  9. .sub-greater a:hover .name{top:-28px;left:-38px;z-index:101;padding:4px 6px;height:20px;line-height:20px;overflow:hidden;background-color:#fff;border-radius:2px;box-shadow:0 0 3px #000;min-width:100px;opacity:.8}  

  10. .sub-greater a:nth-child(n+7):hover .name{top:36px}  

 

相关阅读: