在zblog模板制作中常常要在首页添加一个读者墙的功能,吸引更多的网友来交流。
下面我来教大家
用YT.CMS插件实现读者墙的功能,又可以少安装一个插件了!
是不是很给力啊!!!只是放在静态页需要重建才可以,此问题有待解决!
实现代码:
<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)">
名称 <#eval/row(2)#>
网址 <#eval/row(1)#>
邮箱md5 <#eval/MD5(row(0))#>
评论数 <#eval/row(3)#>
</YT>
其中 数字 18 为调用的条数!其它的在代码中都有所介绍!
下面给大家讲个实例!就是在loper1.3里面的侧边栏读者墙效果!
首先将下面的html代码加入到页面中
<h3>读者墙</h3>
<div class="sub-greater">
<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)">
<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>
</YT>
</div>
然后再加入下面的CSS代码
.sub-greater{width:270px;}
.sub-greater a{width:36px;height:36px;display:block;float:left;position:relative;margin:0 8px 8px 0}
.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;}
.sub-greater .pic img{border-radius:4px; width:36px; height:36px}
.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}
.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}
.sub-greater a:hover .pic{z-index:100;border-color:#eee;-webkit-transform:rotatey(180deg);-moz-transform:rotatey(180deg)}
.sub-greater a:hover .num{z-index:101;-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);opacity:.8}
.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}
.sub-greater a:nth-child(n+7):hover .name{top:36px}
相关阅读: