VPS参考、测评、推荐
分享你关注的VPS主机优惠信息

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

博客添加书签?以下将讲解博客中添加书签,并附上实现代码,希望对你有所帮助!

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

好在有些网站提供了实现书签功能的代码,很不错。于是做了一些测试,结果不是很理想。部分代码无效,调用小图片过多,增加了http连接数,对网站加载速度有一定影响。求人不如求己。我从各大书签网站下载了最新的代码,稍微东拼西凑之后,用CSS Sprites技术把这些小图做成,明显提高了速度。此外,代码经过W3C优和验证。

下图是成功制作的书签效果。或许你在本文底部的东西能让你有更深的体会:

如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)

好东西不能独享。下面一下书签收藏按钮的制作过程。很简单。

1.在single.php下你的主题文件夹。

2.发现

#搜仓{ 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;} #搜仓李# 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中添加链接)

推荐学习:WordPress教程

WordPress博客就是这样添加书签的。详情(附实现代码)请关注草根吧VPS其他相关

:如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加) https://vps.caogenba.com.com/91968.html

赞(0) 打赏
未经允许不得转载:草根吧VPS_最新VPS信息参考 » 如何给WordPress博客添加书签?(带实现代码)(如何在wordpress中添加链接)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址