WordPress美化：侧边栏实现一图三按钮的效果方法

云墨

647
文章

0
评论

2018年8月30日评论 1,297

点击注册网校，注册后直接登录使用，免费入驻，技术支持微信：https98

WordPress美化：侧边栏实现一图三按钮的效果方法

可能有的人不太明白什么是一图三按钮的效果，其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮，具体效果看下图一图三按钮效果，或见下图所示：

WordPress美化：侧边栏实现一图三按钮的效果方法

其实这个一图三按钮效果，一般人还真用不到，所以我就没有整合到Nana主题中，但是一直都有博主来问如何实现。虽然每次都说这个是比较简单的代码，直接浏览器中查看元素复制相应的 HTML 代码及 CSS 代码即可，但是还是有很多人不太懂得如何下手去折腾，所以今天就特意把它写成教程，以便让更多喜欢这个效果的博主们能够用上它。

侧边栏实现一图三按钮效果步骤

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

WordPress美化：侧边栏实现一图三按钮的效果方法

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

WordPress美化：侧边栏实现一图三按钮的效果方法

<div id="update_version"><a href="http://v.seoqe.com/" target="_blank" rel="noopener"><img title="投稿中心" src="https://ww1.sinaimg.cn/large/005BYqpgly1fruweqkscjj308c05k74e.jpg" alt="投稿网址" /></a><a class="blog_link" href="http://v.seoqe.com/" target="_blank" rel="noopener">手心影院</a><a class="cms_link" href="http://xs.seoqe.com/" target="_blank" rel="noopener">手心小说网</a><a class="grid_link" href="https://www.seoqe.com/about.html" target="_blank" rel="noopener">关于我们</a></div>
<div>
<a href="https://www.seoqe.com/%E7%BB%99%E6%88%91%E6%8A%95%E7%A8%BF.html" rel="noopener" target="_blank">点击在线投稿</a>
投稿邮箱：<b>888@seoqe.com</b>
交流 Q群：<b><a href="https://shang.qq.com/wpa/qunwpa?idkey=c2243c59c200c27b61f6780f568b4ff0e734842c3fce633fdfaf0c885d602f9d" rel="noopener" target="_blank">553851850</a></b></div>

注意上面的链接和相关信息可以根据自己的来修改。

修改完后就可以了！

1. 如有链接无法下载、失效或广告，请联系QQ：181289218 处理！
2. 本站的所有资源为购买、网络收集，或者用户投稿的资源，版权归原作者及网站所有!
3. 如若侵犯了您的权利，请及时联系站长删除!
4. 本站提供的资源，都不包含技术服务请大家谅解！
5. 此软件“仅限学习交流，不能用于商业用途”！
6. 如用于商业用途，请到官方购买正版软件，追究法律责任与“云墨SEO”站点无关！