WordPress侧边栏如何实现一图三按钮

在懿古今看到一图三按钮的效果感觉非常棒拿过来与大家分享:

看上去不太明白,其实说白了就是在侧边栏添加的CSS样式。这样有点基础的都知道了吧,下面把懿古今的样式与方法和大家分享:

CSS样式

1
2
3
4
5
6
#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}

HTML内容

把下面这段代码放入边栏文本小工具里,把链接和内容替换成你自己的即可。

1
2
3
4
5
<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>

因为他是一种前端布局,所以可用性非常广泛,除了在wordpress边栏以外,在其他任何能用代码的地方都可以用。

给我留言