在点点模板中加入自带的转载和喜欢按钮
今天把多说的评论集成进了我的点点模板,这样就更像一个专业博客了,毕竟博友之间互相评论很多都是不想登录的,而点点自带的评论必须登录才可以互动,会造成大量的评论流失。
其次,在模板中加入了转载以及喜欢按钮,这个是一直想加入的,然后找遍了点点文档中心也毫无发现,就进了点点开发者论坛,看到很多人也有这个需求,其中在一个评论中看到说有人已经弄出来了,给了一个演示的地址。
那我就安装那个演示模板,试着将其里面需要元素调用出来。
那个模板过于强大,太多的设置,以及时间线的安排(就是缓慢加载文章于首页,忘了这个叫什么来着...囧)导致了在点点模板开发工具venus中不能在线预览,所以对于我来说,是致命的打击。
好吧,那我还是得看清源码的调用了,最后才在里面发现了两个需要的内容,并改成适合自己模板的代码。
转载代码如下
<a href="http://www.diandian.com/reblog/{$post.id}" target="_blank" title="转载" rel="nofollow" class="icon-reblog">转载</a>
其实就是一个网址加了post.id而已,这里添加了nofollow,你懂的。
喜欢按钮代码如下
<iframe style="height: 20px;width: 20px;" src="https://huilang.me/wp-content/uploads/2013/08/095744HoR.png" class="fav-iframe" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
这里是iframe加载,加入了css高宽限制,这个部分调用还真是麻烦。
最后就是css了
.icon-reblog {float:right;width:20px;height:20px;display:block;overflow:hidden;text-indent:-9999px;}
.icon-redirect {background:url('http://x.papaapp.com/farm1/90ecce/5b5fb3a6/blue-icons.png') -120px -20px no-repeat;}
.icon-redirect:hover {background-position:-90px -20px;}
.icon-reblog {background:url('http://x.papaapp.com/farm1/90ecce/5b5fb3a6/blue-icons.png') -150px -20px no-repeat;}
.icon-reblog:hover {background-position:-150px 0;}
这样就搞定啦!(说明下,这里是自用的CSS,不一定适合所有人,具体细节需要自行修改。)
剩下的“关注我”按钮不知道有没有哪位高手可以搞出来,应该调用和“喜欢”差不多,本人做不出来,惭愧...
具体演示见本站记忆碎片。
补个演示图
对了,这个喜欢按钮,如果加进去的话,自己是看不到的,因为自己不能”喜欢“自己嘛哈哈,只能在别人的博客能看到,或者你退出登录就能看到具体效果了。
看完了不要忘了点一下喜欢哦!