最近大海牛一直在改进爱海牛的网站模板，在boke112上看到WordPress一图三按钮的侧边栏效果，应该以后能用的上，所有把代码整理了一下，感兴趣的朋友可以看下。

因为使用频率比较低，所有没有集成到主题中，使用小工具-文本的方式添加一图三按钮效果。

效果图

添加方法

1、外观——小工具——文本

2、标题（可选，可不输入），把css和html代码按顺序都复制到文本内容中即可。

     注意：复制的时候，选择文本，如下图所示。

3、只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。

具体代码如下：

CSS

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

HTML

<div id="update_version">
<a target="_blank" href="https://www.aihainiu.com"><img src="https://www.aihainiu.com/180210_ytsan.jpg" title="爱海牛下载站" alt="爱海牛下载站"></a>
<a target="_blank" href="https://www.aihainiu.com" class="blog_link" rel="nofollow noopener">我要投稿</a>
<a target="_blank" href="https://www.aihainiu.com" class="cms_link" rel="nofollow noopener">我要回答</a>
<a target="_blank" href="https://www.aihainiu.com" class="grid_link" rel="nofollow noopener">我要合作</a>
</div>