wordpress小工具实现侧边栏一图三按钮效果

我们常常在其他站点看到，侧边栏使用一图三按钮效果投放广告位或者博主等信息，不仅美观而且比较实用。本章主要整合了亲测吧和懿古今站点代码，以便有需要的博主可以借鉴。

实现步骤：

1、将以下 CSS 代码添加到所使用主题的 style.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}

2、后台→外观→小工具→使用“文本”小工具，添加到指定侧边栏中。

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

展示效果图：

实现效果代码：

效果一代码：

<div id="update_version"><a href="http://8ik.cn/" target="_blank" rel="external nofollow noopener"><img title="听海風说" src="http://8ik.cn/wp-content/uploads/2021/09/ditan.jpg" alt="爱游博客" /></a>
<a class="blog_link" href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">投稿中心</a><a class="cms_link" href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">在线投稿</a><a class="grid_link" href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">联系博主</a></div>
<div align="center"><strong>每一个认真生活的人，</strong>
<strong>都应该被认真对待。</strong></div>

效果二代码：

<div id="update_version"><a href="http://8ik.cn/" target="_blank" rel="nofollow noopener"><img title="免备案网站推荐使用阿里云主机" src="http://8ik.cn/wp-content/uploads/2021/09/ditan.jpg" alt="免备案使用阿里云主机" />
</a><a class="blog_link" title="免费领阿里云代金券" href="http://8ik.cn" target="blank" rel="nofollow noopener">阿里云代金</a><a class="cms_link" title="常用优惠码及阿里云腾讯云老薛主机和学生服务器等优惠活动推荐" href="http://8ik.cn target=" rel="nofollow noopener">优惠活动推荐</a><a class="grid_link" title="免费领取腾讯云代金券折扣券" href="http://8ik.cn" target="_blank" rel="nofollow noopener">腾讯云代金券</a></div>
&nbsp;

效果三代码：

<div id="update_version"><a href="http://8ik.cn/" target="_blank" rel="external nofollow noopener"> <img title="投稿中心" src="http://8ik.cn/wp-content/uploads/2021/09/ditan.jpg" alt="投稿网址" /></a>
<a class="blog_link" href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">投稿中心</a><a class="cms_link" href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">在线投稿</a><a class="grid_link" href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">联系博主</a></div>
&nbsp;
<div>
<a href="http://8ik.cn/" target="_blank" rel="external nofollow noopener">点击在线投稿
</a>投稿邮箱：
<b></b>交流QQ群：
</div>