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

投稿   懿古今  2017-08-04 07:29:28  465 人阅读  36 条评论

可能有的人不太明白什么是一图三按钮的效果,其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮,具体效果请移步参观懿古今站点侧边的一图三按钮效果,或见下图所示:

WordPress侧边栏如何实现一图三按钮的效果? WordPress 第1张

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

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

1、将以下 CSS 代码添加到所使用主题的 style.css 文件中

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

2、登录站点后台 >> 外观 >> 小工具 >> 将『文本』小工具添加到指定侧边栏中。

WordPress侧边栏如何实现一图三按钮的效果? WordPress 第2张
3、接着输入标题(可选,可不输入),并将文本小工具编辑框切换到文本格式,然后将以下代码添加进去并保存即可。
WordPress侧边栏如何实现一图三按钮的效果? WordPress 第3张

  1. <div id="update_version"><a target="_blank" href="https://www.yigujin.cn//1208.html"><img src="https://res.yigujin.cn/tp/2017/170204_Nana.jpg?imageslim" title="Nana主题升级到3.1版本" alt="Nana主题升级到3.0版本"></a><a target="_blank" href="https://www.yigujin.cn//nanablog/" class="blog_link">博客布局</a><a target="_blank" href="https://www.yigujin.cn//" class="cms_link">杂志布局</a><a target="_blank" href="https://www.yigujin.cn//nanagrid/" class="grid_link">图片布局</a></div>

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

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

WordPress侧边栏如何实现一图三按钮的效果? WordPress 第4张

温馨提示

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

历史上的今天:

文章标签: ,   ,  
原文地址:https://www.yigujin.cn/1292.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
懿古今

相关文章 分类热门分类热评最新问答

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 韦贝贝
    韦贝贝 @回复

    其实不需要添加到style.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>

  2. 拿着灼热的铁
    拿着灼热的铁 @回复

    这个还是挺简单的

  3. Houu
    Houu's blog @回复

    不错不错。。。。。

  4. 狂放
    狂放 @回复

    原来只是html啊,我还以为可以用PHP集成到小工具里呢

  5. 聚赚园
    聚赚园 @回复

    呵呵,拜读,又多以技巧

  6. 钛客志
    钛客志 @回复

    这,竟然是简单的代码

  7. 我爱动感单车网
    我爱动感单车网 @回复

    [赞] 么么哒!

  8. BanYuner
    BanYuner @回复

    原来是纯HTML,不过也是一个不错的选择,做成后台可控的话估计对于写主题的话,更加方便

  9. 励志语录
    励志语录 @回复

    很漂亮,不错。

  10. 冷知识
    冷知识 @回复

    看上去很美观

  11. 20零花钱
    20零花钱 @回复

    这个不错 , 等下试试。

  12. 钓鱼小站
    钓鱼小站 @回复

    这个很喜欢 收下了 老古

  13. 明月登楼
    明月登楼 @回复

    越看越喜欢,呵呵!

  14. 老地儿
    老地儿 @回复

    进来看一眼。

  15. 一伍一拾
    一伍一拾 @回复

    这个真心不错,感谢分享

  16. 小苍老师
    小苍老师 @回复

    蛮实用的,估计以后俺会用的着!

  17. 阁楼
    阁楼 @回复

    简单使用,推荐

  18. 闲鱼
    闲鱼 @回复

    搭配得还蛮好看的,用处多多

  19. 品牌馆
    品牌馆 @回复

    不错,这个可以有

  20. 小萝博客
    小萝博客 @回复

    期待已久了

  21. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    这效果看起来不错啊

  22. 九哥
    九哥 @回复

    这个非常棒。

  23. 家住海边喜欢浪
    家住海边喜欢浪 @回复

    不错的功能,不过目前应该用不到,先收藏了

  24. 幻想
    幻想's Blog @回复

    好东西,收了~

  25. 玉满斋
    玉满斋 @回复

    这个效果真心不错!

  26. 很文博客
    很文博客 @回复

    这个值得学习一下!

  27. 龙笑天
    龙笑天 @回复

    灰常nice!

  28. 心动
    心动 @回复

    好东西,收了~

  29. 爱时尚
    爱时尚 @回复

    我准备用你的主题再建一个站

  30. 福利堆
    福利堆 @回复

    清晨来飞过