正在加载...

自己打造WordPress的侧边栏RSS订阅图标

这两天换了主题,想顺便也加强一下RSS订阅吧,于是开始从网上搜索各种插件,结果没有让我感到满意的,不是链接第三方JS,就是自定义功能不强,心想还是自己手工制作吧。

懒了很久了,自己的制作水平也差了很多,本来很简单的东西折腾了很久。。。

首先找到一套订阅图标,尽量一致的风格(这个为了美观,你懂的。),然后对每个图像书写链接,这是最简单的办法,例子就不给了,仅使用html代码就能搞定,唯一的缺点是对每个图像都会有一次http请求,感谢速度会比较慢。

接下来就发挥我们的折腾精神吧,把所有图标都合并成一个文档,(这里heartnn走了不少弯路,一开始用了background-position,可是发现无法做成链接)利用map标签,用css就可以搞定了,下面是heartnn的代码,值得注意的是我这里用的是矩形热点,coords属性对应的是两个对角的坐标,map标签中的name和id要对应到img标签里。

<img src="自定义的图片地址" width=216 height=76 usemap="#rssmap" border="0">
<map name="rssmap" id="rssmap">
	<area shape=rect coords="0,0,103,16" href="http://heartnn.tk/feed/" title="RSS订阅" target="_blank">
	<area shape=rect coords="113,0,216,16" href="http://www.google.com/ig/add?feedurl=http://heartnn.tk/feed/" title="使用Google Reader订阅" target="_blank">
	<area shape=rect coords="0,20,103,36" href="http://9.douban.com/reader/subscribe?url=http://heartnn.tk/feed/" title="使用豆瓣9点订阅" target="_blank">
	<area shape=rect coords="113,20,216,36" href="http://reader.youdao.com/b.do?url=http://heartnn.tk/feed/" title="使用有道订阅" target="_blank">
	<area shape=rect coords="0,40,103,56" href="http://www.xianguo.com/subscribe.php?url=http://heartnn.tk/feed/" title="使用鲜果订阅" target="_blank">
	<area shape=rect coords="113,40,216,56" href="http://www.zhuaxia.com/add_channel.php?url=http://heartnn.tk/feed/" title="使用抓虾订阅" target="_blank">
	<area shape=rect coords="0,60,103,76" href="http://mail.qq.com/cgi-bin/feed?u=http://heartnn.tk/feed/" title="使用QQ邮箱订阅" target="_blank">
	<area shape=rect coords="113,60,216,76" href="http://inezha.com/add?url=http://heartnn.tk/feed/" title="使用哪吒订阅" target="_blank">
</map>
原创文章,转载请注明 » 转载自Heartnn的自留地
本文链接地址 » 自己打造WordPress的侧边栏RSS订阅图标
本文标签 » ,

    • Kars
    • 2010年12月20日 10:14下午

    =.= 那个 map 、 area 是哪里的标签? 看都没看到过、、、
    你用 a 标签 做成链接,再用 CSS 定义一下 背景图片,就可以了、、具体可以看 我博客的 About 页面,不过我的那个 订阅图片 经过了 base64 编码,看起来,可能会有少许不便、、

      • heartnn
      • 2010年12月21日 9:20上午

      用的ul+li的方法啊,我一开始用div不行,后来就考虑到这个方法了,呵呵。你那个代码压缩的太厉害,看的眼花。。。

  1. 没有通告