关注互联网、体验互联网,记录成长历程

博客侧边栏订阅样式共享

2009-06-13

博客之前侧边栏有六个订阅方式,分别是六个不同的在线阅读器,当时考虑的是提供更多的阅读器提供方式以满足不同需求的读者,但通过对订阅统计的分析,发现订阅博客的读者基本上是在Google Reader和鲜果两大阅读器阵营,而且更重要的是除了六个阅读器外没有提供原生的订阅链接,所以就修改了这一块的样式。

有朋友觉得这个样式好看些,希望共享样式出来,所以在这里就把样式共享出来。这里的修改只针对Prower V2这个主题。

先下载这个图片上传到主题的images文件夹里:

然后复制这段HTML结构到主题的rsidebar.php文件里替换原来的RSS结构,当然你要修改其中的订阅地址为你自己博客的订阅地址:

<div id=”rss”>
<link title=”RSS 2.0″ type=”application/rss+xml” href=”http://feed.prower.cn” rel=”alternate” />
<a id=”rssGoogle” title=”用Google阅读器订阅” href=”http://fusion.google.com/add?feedurl=http://feed.prower.cn” target=”_blank”>用Google阅读器订阅</a>
<a id=”rssIcon” title=”RSS订阅” href=”http://feed.prower.cn” target=”_blank”>RSS订阅</a>
<a id=”rssXiangou” title=”用鲜果阅读器订阅” href=”http://www.xianguo.com/subscribe.php?url=http://feed.prower.cn” target=”_blank”>用鲜果阅读器订阅</a>
</div>

再复制以下样式到style.css文件里,替换原来的RSS样式:

#rss {width:290px; height:50px; overflow:hidden;}
#rssGoogle,#rssIcon,#rssXiangou {float:left; padding-top:50px; overflow:hidden; display:block; background:url(images/rssBg.png) no-repeat;}
#rssGoogle:hover,#rssIcon:hover,#rssXiangou:hover {background:url(images/rssBg.png) no-repeat -290px 0;}
#rssGoogle {background-position:0 0; width:113px;}
#rssGoogle:hover {background-position:-290px 0;}
#rssIcon {background-position:-113px 0; width:79px;}
#rssIcon:hover{background-position:-403px 0;}
#rssXiangou {background-position:-192px 0; width:98px;}
#rssXiangou:hover {background-position:-482px 0;}

完成以上三步,侧边栏的订阅样式就可以和我现在的一样了。

更新:如果复制过去后不能显示图片,请手动修改HTML结构里的双引号。

分类目录:前端开发 | 标签: | 查看:20,040

25 条评论

  1. 你的升级到2。8 了吗 怎么不显示评论呢

  2. SORRY 显示了 刚才看错了

  3. wind 说道:

    摄氏度,我按你的方法做了。怎么我的不显示图像呀?

  4. xiao文 说道:

    真好
    摄氏度谢谢了 呵呵

  5. 石老人 说道:

    我用谷歌reader订阅的,呵呵,很漂亮

  6. 我@soho 说道:

    的确,非常好看啊。借用到iNove上去。呵呵

  7. 游侠 说道:

    按照你的设置弄了一下,订阅源出问题了。。

    麻烦你看下。谢谢了。

  8. heytime 说道:

    这个图样跟主题很和谐,比以前的六个rss的更加大气。不错

  9. MAY 说道:

    好看,但是我用的主题好像不能用这个图标。

  10. 薏米 说道:

    学习下哈

  11. 木鱼猫 说道:

    主题越做越漂亮了,看得我心痒痒,啥时候说不定就换成你这个主题了

  12. 蓝天博客 说道:

    这个订阅样式很不错

  13. Zac 说道:

    非常不错,效果好极了,等我出差回来,也改这个侧边栏效果。

  14. 大帝007 说道:

    这样的订阅放在你的博客上,确实帅多了。

  15. 蓝海 说道:

    我的RSS订阅不行啊!说什么这个域名啊!怎样办啊?鲜果的网址就变成乱码啊!还有GG就打不开和图没显示啊!这样怎样解决啊???

  16. 漢文溪 说道:

    真漂亮 与主题相得益彰 珠联璧合 哈哈

  17. PeacePig 说道:

    怎么手动修改HTML结构里的双引号呢

  18. 器米米 说道:

    超级需要。

  19. 海天无影 说道:

    不错 很漂亮的啊

  20. 喷饭头头 说道:

    你好,请问下,我也是试用这个博客主题的,为什么我的评论(留言)部分没有回复功能,能帮我一下吗?谢谢!

  21. minkaka 说道:

    这个方式能应用到最新版吗?

发表评论

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

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>