在文章后面添加订阅帮助框

By Jiang | 7月 17, 2007

订阅帮助

这个问题来自网友 WesleyBlog 的询问。本站(总而言之,统而言之)每篇文章的后面,都有如图所示的一个订阅帮助框。Feed 订阅的好处有很多,比如说可以将喜欢的是几个或者更多的站点都订阅到一个在线或离线的阅读器中,可以省却访问大量网站的麻烦等。

这个订阅帮助框的用途,主要是鼓励网友通过 Feed 来订阅我的博客。类似的订阅帮助栏在许多博客中都可以看到,估计代码也都大同小异。我这个最初是仿制偶爱偶家的样式,不过他做得比较高级一些的,使用了 js 脚本语言,直接做成了弹出式窗口;不过我将代码放到自己网站上就搞不定了。因此,我自己做的这个比较简单,只有最简单的 html 静态代码,感兴趣的网友可以将代码复制到你自己的博客上。

文章后面的 html 代码,这段代码复制到你想要添加的地方,一般是 single.php 文件内:

  1. <div class="subscribebox"><span class="feedaddr">喜欢本文?欢迎订阅 <a title="Feed全文(Full Content Feed)" href="http://feeds.feedburner.com/jiangzhanyong"><span class="subscribelink"><?php bloginfo('name'); ?></span></a></span> <span class="feedhelp"><a title="添加更多阅读器" href="http://jiangzhanyong.com/feed-subscribe"><span class="subscribelink">如何订阅到更多阅读器</span></a></span></div>

样式表的 css 代码,这段代码复制到你当前主题的 style.css 文件内:

  1. .subscribebox {
  2.     margin: 20px;
  3.     padding: 10px;
  4.     background:#ffffdd;
  5.     border: 1px solid #ccc;
  6. }
  7. .subscribelink {
  8.     color: #fe5f10;
  9.     font-weight: bold;
  10. } 
  11. .feedaddr {
  12.     background: url('img/feed.png') no-repeat;
  13.     padding-left: 20px;
  14.     margin-left: 7px;
  15.     magin-right: 7px;
  16. }
  17. .feedhelp {
  18.     background: url('img/feedhelp.gif') no-repeat;
  19.     padding-left: 20px;
  20.     margin-left: 7px;
  21.     magin-right: 7px;
  22. }

最后还要将两个图片放到你当前主题的 img 文件夹内(如果你的主题内的图片目录名字不同,需要将 css 代码内的 img 修改为相应目录名称;或者创建一个新的 img 目录),即可正常显示。

如果你还想要订阅本站这个页面,只需要访问这个页面,然后复制其中的相关代码,将其中的 Feed 地址修改为自己的 Feed 即可。

Topics: 博客建设 | 5,575 views | 5 Comments »


5 comments | Add One

  1. EaSy - 07/17/2007 at 11:17 下午 #

    呵呵,终于发表出来了。。等了半天了。
    谢谢!

  2. WesleyBlog - 07/25/2007 at 9:34 上午 #

    hoho,多谢总统这么详细的解答

  3. Jiang - 07/25/2007 at 11:07 上午 #

    呵呵,这个还是很有价值的 :)

  4. 在文章后面添加订阅帮助框 at LauWei-记录·观察·思考·分享 - 07/26/2007 at 11:28 下午 #

    [...] 转载自:总而言之,统而言之 标签: Blog, feed, WordPress, 博客, 代码收藏/分享 [...]

  5. BlueSpeeder - 09/13/2007 at 7:12 下午 #

    我想可能是你没注意到他源代码底部的那段JS调用?

    我弄出来了
    http://www.liangeng.com/2007/09/13/divrss/
    欢迎使用~呵呵

LinkWorth
Hostgator

酷站链接 (Featured Links)

最新评论 (Recent Comments)

  • air jordan shoe: 不错,挺厉害的~~
  • Hairstyles: 原来链接这么重要!
  • Haircuts: 有空试一下看看
  • CHI Flat Iron: 哇,这么多插件啊,慢慢看!
  • 诗酒如画: 1)备份你的WordPress数据库 推荐用WordPress Database Backup在后台操作.下载备份的压缩包或者是传到自己邮箱里都可以. 如果直接在数据库中备份的话,记得选择UTF8编码,切记. 2)备份你的程序...
  • north face wholesale: en ,我会试一试的。

搜索 (Search)

合作伙伴

推荐站点 (Recommendations)

Partner links

WordPressChina
  • 原创博客联盟