给WordPress侧边栏添加一图三按钮效果

IT教程网 2017年8月14日00:19:07WordPress wp美化1 2,869阅读模式

给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、登录站点后台 >> 外观 >> 小工具 >> 将『文本』小工具添加到指定侧边栏中。

3、接着输入标题(可选,可不输入),并将文本小工具编辑框切换到文本格式,然后将以下代码添加进去并保存即可。

  1. <div id="update_version"><a target="_blank" href="http://yigujin.cn/1208.html"><img src="http://tp.yigujin.cn/170204_Nana.jpg?imageslim" title="Nana主题升级到3.1版本" alt="Nana主题升级到3.0版本"></a><a target="_blank" href="http://yigujin.cn/nanablog/" class="blog_link">博客布局</a><a target="_blank" href="http://yigujin.cn/" class="cms_link">杂志布局</a><a target="_blank" href="http://yigujin.cn/nanagrid/" class="grid_link">图片布局</a></div>

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

本文来源于boke112导航

weinxin
我的微信
本站专注IT互联网领域,分享有用的教程和资源,目的就是希望大家共同进步,一起学习!
IT教程网
  • 本文由 发表于 2017年8月14日00:19:07
  • 转载请务必保留本文链接:http://www.seozyw.com/wp/414.html
匿名

发表评论

匿名网友 填写信息

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

确定

评论:1   其中:访客  1   博主  0
    • 快速排名
      快速排名 1

      学习了 顶起来