WordPress侧边栏小工具实现一图三按钮 – WordPress美化

王小优
王小优
王小优
231
文章
0
评论
2015年7月18日 评论 5,819 1828字阅读6分5秒
摘要

今天在网上闲逛的时候,看到一博客的侧边栏小工具里面,有一图三按钮效果不错,现分享给大家。

WordPress侧边栏小工具实现一图三按钮 – WordPress美化

代码部署:

1、将以下CSS代码添加到所使用主题的style.css文件中:

  1. #update_version img{margin:5px 0 15px}
  2. #update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff}
  3. .blog_link{background-color:#2ba9fa}
  4. .blog_link,.cms_link{float:left;margin-right:5%}
  5. .cms_link{background-color:#ff6969}
  6. .grid_link{float:left;background-color:#70c041}

2、后台→外观→小工具→文本小工具,添加到指定侧边栏中。

WordPress侧边栏小工具实现一图三按钮 – WordPress美化

3、将文本小工具编辑框切换到文本格式,将以下代码添加进去并保存即可。

WordPress侧边栏小工具实现一图三按钮 – WordPress美化

效果一

代码

此处为隐藏的内容
发表评论并刷新,方可查看

效果图

WordPress侧边栏小工具实现一图三按钮 – WordPress美化

效果二

代码

此处为隐藏的内容
发表评论并刷新,方可查看

效果图

WordPress侧边栏小工具实现一图三按钮 – WordPress美化

说明:其他代码不用修改,只需将代码中的图片地址、文字、链接等内容修改成自己想要的即可。

这个一图三按钮的效果,不单单适用于WordPress,也适用于ZBlog站点的侧边栏,更是适用于其他程序所见的站点侧边栏。当然,如果添加到不到侧边栏的地方应该也是可以,具体效果请自行测试和修改。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
为WordPress最新文章增加NEW最新提示标志 WordPress美化

为WordPress最新文章增加NEW最新提示标志

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示,让你的博客更加饱满、人性化,一起跟王小优折腾起来。 看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: