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

 懿古今   2017-08-03 08:04:21 发布  技术文档

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

WordPress侧边栏如何实现一图三按钮的效果? - 第1张 - 懿古今(www.yigujin.cn)

其实这个一图三按钮效果,一般人还真用不到,所以我就没有整合到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侧边栏如何实现一图三按钮的效果? - 第2张 - 懿古今(www.yigujin.cn)
3、接着输入标题(可选,可不输入),并将文本小工具编辑框切换到文本格式,然后将以下代码添加进去并保存即可。
WordPress侧边栏如何实现一图三按钮的效果? - 第3张 - 懿古今(www.yigujin.cn)

  1. <div id="update_version"><a target="_blank" href="https://www.yigujin.cn/1208.html"><img src="https://www.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侧边栏如何实现一图三按钮的效果? - 第4张 - 懿古今(www.yigujin.cn)

温馨提示

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

本文地址:https://www.yigujin.cn/1292.html

你可能感兴趣的文章

文章标签: ,   ,  
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

发表评论

  1. 橘子书
    橘子书 @回复

    用文本增强,就不用扔css到style了。

    • 懿古今
      懿古今2017-08-04 15:36  回复

      @橘子书因为一般这种CSS代码如果是整站都用到的话,我都是扔style.css文件上去的,如果只是某个页面用到,就不扔。

  2. 福利堆
    福利堆 @回复

    功能很漂亮 回头也搞一个

    • 懿古今
      懿古今2017-08-04 15:36  回复

      @福利堆[呲牙] 必要的时候,弄上这个,确实很不错哦

  3. 雅岚
    雅岚 @回复

    多按钮暂时用不上,只是想把友链分个两列三列之类的,一直失败。。 [黑线]

    • 懿古今
      懿古今2017-08-04 15:34  回复

      @雅岚这个分类两三列应该很容易的吧,就是把他们的宽度改为50%或33.33%,然后统一向左浮动就行。

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

    不错,这个我喜欢!可以借鉴一下!

  5. 明月学习笔记Blog
    明月学习笔记Blog @回复

    这个感觉很棒的效果!

  6. 姜辰
    姜辰 @回复

    这个效果很不错啊

    • 懿古今
      懿古今2017-08-04 15:30  回复

      @姜辰[呲牙] 有时候用上这个效果搭配着站点使用,还是挺好的

  7. 九哥
    九哥 @回复

    已经用上了,哈哈。

    • 懿古今
      懿古今2017-08-04 15:24  回复

      @九哥适当使用这个效果还是挺不错的

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

    [给力] 说句实话,这个还是顶好的,也已经用上了(效果个人自认为很赞,么么哒)!

  9. 亦之博客
    亦之博客 @回复

    很实用的教程 ,受用了。 [给力]