在点点模板中加入自带的转载和喜欢按钮

2012.09.02 分享 4283 人浏览 留言

今天把多说的评论集成进了我的点点模板,这样就更像一个专业博客了,毕竟博友之间互相评论很多都是不想登录的,而点点自带的评论必须登录才可以互动,会造成大量的评论流失。

其次,在模板中加入了转载以及喜欢按钮,这个是一直想加入的,然后找遍了点点文档中心也毫无发现,就进了点点开发者论坛,看到很多人也有这个需求,其中在一个评论中看到说有人已经弄出来了,给了一个演示的地址。

那我就安装那个演示模板,试着将其里面需要元素调用出来。

那个模板过于强大,太多的设置,以及时间线的安排(就是缓慢加载文章于首页,忘了这个叫什么来着...囧)导致了在点点模板开发工具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="http://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,不一定适合所有人,具体细节需要自行修改。)

剩下的“关注我”按钮不知道有没有哪位高手可以搞出来,应该调用和“喜欢”差不多,本人做不出来,惭愧...

具体演示见本站记忆碎片

补个演示图

 

对了,这个喜欢按钮,如果加进去的话,自己是看不到的,因为自己不能”喜欢“自己嘛哈哈,只能在别人的博客能看到,或者你退出登录就能看到具体效果了。

看完了不要忘了点一下喜欢哦!

文章地址:http://huilang.me/dd-like/

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif