侧边栏如何实现一图三按钮的效果

　　可能有的人不太明白什么是一aclasstaghrefwiki10073IFvzmqC。html图三a按钮的效果，其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮，具体效果看下图一图三按钮效果，或见下图所示：
　　其实这个一图三按钮效果，一般人还真用不到，所以我就没有整合到Nana主题中，但是一直都有博主来问如何实现。虽然每次都说这个是比较简单的代码，直接浏览器中查看元素复制相应的HTML代码及CSS代码即可，但是还是有很多人不太懂得如何下手去折腾，所以今天就特意把它写成教程，以便让更多喜欢这个效果的博主们能够用上它。
　　侧边栏实现一图三按钮效果步骤
　　1、将以下CSS代码添加到所使用主题的style。css文件中
　　updateversionimg｛margin：5px015px｝
　　updateversiona｛width：30；height：35borderradius：3textalign：lineheight：35fontsize：9color：fff｝
　　。bloglink｛backgroundcolor：2ba9fa｝
　　。bloglink，。cmslink｛float：marginright：5｝
　　。cmslink｛backgroundcolor：ff6969｝
　　。gridlink｛float：backgroundcolor：70c041｝
　　2、登录站点后台外观小工具将文本小工具添加到指定侧边栏中。
　　3、接着输入标题（可选，可不输入），并将文本小工具编辑框切换到文本格式，然后将以下代码添加进去并保存即可。
　　ahrefhttp：v。seoqe。imgtitle投稿中心srchttps：ww1。sinaimg。cnlarge005BYqpgly1fruweqkscjj308c05k74e。jpgalt投稿网址aclassbloglinkhrefhttp：v。seoqe。手心影院aclasscmslinkhrefhttp：xs。seoqe。手心小说网aclassgridlinkhrefhttps：www。seoqe。comabout。关于我们
　　
　　ahrefhttps：www。seoqe。comE7BB99E68891E68A95E7A8BF。点击在线投稿
　　投稿邮箱：888seoqe。
　　交流Q群：ahrefhttps：shang。qq。comwpaqunwpa？idkeyc2243c59c200c27b61f6780f568b4ff0e734842c3fce633fdfaf0c885d602f9553851850
　　说明：其他代码不用修改，只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。
　　企鹅SEO已经根据以上教程在侧边栏实现了一图三按钮的效果，具体效果请移步企鹅seo侧边栏或见下图：
　　温馨提示
　　这个一图三按钮的效果，不单单适用于WordPress，也适用于zblogPHP站点的侧边栏，更是适用于其他程序所见的站点侧边栏。当然，如果添加到不到侧边栏的地方应该也是可以，具体效果请自行测试和修改。