快好知 kuaihz

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

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

点击在线投稿

投稿邮箱:888@seoqe.com

交流 Q群:553851850

 

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

企鹅SEO已经根据以上教程在侧边栏实现了一图三按钮的效果,具体效果请移步企鹅seo侧边栏或见下图:

温馨提示

这个一图三按钮的效果,不单单适用于 WordPress,也适用于 zblogPHP 站点的侧边栏,更是适用于其他程序所见的站点侧边栏。当然,如果添加到不到侧边栏的地方应该也是可以,具体效果请自行测试和修改。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:图三  图三词条  侧边  侧边词条  WordPress  WordPress词条  按钮  按钮词条  效果  效果词条  
优化

 盘点wordpress建站可能出...

1、如何集中首页权重  一般来说,网站的首页权重是最高的,所以我们需要进行主页的维护,最基本的一点是减少传播的主页体重,有些主题模板,根据自...(展开)