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

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: 博客建设 | 2,295 Views |


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/
    欢迎使用~呵呵

请您发表评论

姓名 (必填)

Email (不会公开) (必填)

网站


Hostgator
LinkWorth
Ad

酷站链接 (Featured Links)

最新评论 (Recent Comments)

  • Love Blog Earn: 据jiang提供的消息:此次维护升级的内容包括,Apache (Web 服务器软件)将升级到版本 2.2.10 (...
  • 天下没贼: 经过前面之4,之5,以及之6的介绍,我们已经安装好了 Wordpress 。或许趁中间间歇的功夫,你已...
  • 天下没贼: 本文链接: http://jiangzhanyong.com/2007/03/wordpress-lesson-nine-manage-226.html 整个 Yo2 上的相关文章:Wordpress ...
  • 天下没贼: 上一次教程我们讲解了如何撰写博文。现在我们来讲解 WordPress 后台的内容管理功能。登陆 WordPre...
  • 天下没贼: 本文链接: http://jiangzhanyong.com/2007/03/wordpress-lesson-seven-set-up-215.html 整个 Yo2 上的相关文章:Wordpress ...
  • 天下没贼: 如果你喜欢本文或对博客赚钱感兴趣,请订阅本站全文 Feed(参考订阅帮助)。

搜索 (Search)

合作伙伴

推荐站点 (Recommendations)

Partner links

WordPressChina
  • 原创博客联盟