草根吧VPS_最新VPS信息参考
如何给WordPress博客添加书签？以下文章将讲解如何在WordPress博客中添加书签，并附上实现代码，希望对你有所帮助！
这两天我一直在修改我的博客。社交网站书签社交书签& quot，也就是文章下方的按钮，供读者收藏和分享文章。网络上有很多实现书签功能的WordPress插件，但是大部分插件只提供了一个JS代码，其他什么都没有，所以代码定制性很差。
好在有些网站提供了实现书签功能的代码，很不错。于是做了一些测试，结果不是很理想。部分代码无效，调用小图片过多，增加了http连接数，对网站加载速度有一定影响。求人不如求己。我从各大书签网站下载了最新的代码，稍微东拼西凑之后，用CSS Sprites技术把这些小图做成一张，明显提高了速度。此外，代码经过W3C优化和验证。
下图是成功制作的书签效果。或许你在本文底部看到的东西能让你有更深的体会:
好东西不能独享。下面分享一下这个书签收藏按钮的制作过程。很简单。
1.在single.php下打开你的主题文件夹。
2.发现
& ltdiv id = & quot搜仓& quot& gt& ltstrong & gt& ltspan style = & quotcolor:# 9932 cc & quot；& gt收藏品
#搜仓{ margin:15px auto；} #搜仓ul { display:inline；位置:绝对；} #搜仓李{ list-style:none；浮动:左；右边距:10px显示:块；} #搜仓阿利span {/*请把下面的http://example/m.gif改成自己的图片链接*/background:URL(http://example/m . gif)no-repeat；显示:块；高度:16px宽度:16px} #搜仓李#百度a span { background-position:0 0；} #搜仓李# bolaa a span { background-position:0-17px；} #搜仓李#美味a span { background-position:0-34px；} #搜仓李#豆瓣a span { background-position:0-85px；} #搜仓李# Google a span { background-position:0-102 px；} #搜仓李#贺勋a span { background-position:0-119 px；} #搜仓李#九点a span { background-position:0-136 px；} #搜仓李#辛凯a span { background-position:0-153 px；} #搜仓李# poco a span { background-position:0-187 px；} #搜仓李# QQ a span { background-position:0-204 px；} #搜仓李# vivi a span { background-position:0-221 px；} #搜仓李#雅虎a span { background-position:0-238 px；} #搜藏李#郭喜安{ margin-left:10px；垫底:5px}上面的代码使用了CSS Sprites技术，其中#搜仓阿利span的背景图片是可以自定义的，只需要放在你的网站目录下，把http://example/m.gif改成你自己的图片地址就可以了。另外，如果上面的CSS布局不适合你的博客，可以自己改。
嗯，就是这样。看着这些五花八门的书签按钮，是不是感觉很不一样？其实这些书签对美化网站也是有帮助的。有事没事。请在此留言。
因为网页宽度有限，这里只提供了16个主流的书签按钮，其他的可以根据自己的需要添加。以下是其他书签代码和logo下载，非本人原创。看了上面提供的代码，自己添加并不难。
推荐学习:WordPress教程
WordPress博客就是这样添加书签的。详情(附实现代码)请关注草根吧VPS其他相关文章！
