wordpress小工具实现侧边栏一图三按钮效果

转载 懿古今,亲测吧  2021-09-02 17:54  阅读 183 次
阿里云免费代金券,购买阿里云产品前先领券更优惠!

我们常常在其他站点看到,侧边栏使用一图三按钮效果投放广告位或者博主等信息,不仅美观而且比较实用。本章主要整合了亲测吧懿古今站点代码,以便有需要的博主可以借鉴。

实现步骤:

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、将文本小工具编辑框切换到文本格式,将以下代码添加进去并保存即可。

展示效果图:

实现效果代码:

效果一代码:

<div id="update_version"><a href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener"><img title="听海風说" src="https://fzlyblog.cn/wp-content/uploads/2021/09/ditan.jpg" alt="爱游博客" /></a>
<a class="blog_link" href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">投稿中心</a><a class="cms_link" href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">在线投稿</a><a class="grid_link" href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">联系博主</a></div>
<div align="center"><strong>每一个认真生活的人,</strong>
<strong>都应该被认真对待。</strong></div>

效果二代码:

<div id="update_version"><a href="https://fzlyblog.cn/" target="_blank" rel="nofollow noopener"><img title="免备案网站推荐使用阿里云主机" src="https://fzlyblog.cn/wp-content/uploads/2021/09/ditan.jpg" alt="免备案使用阿里云主机" />
</a><a class="blog_link" title="免费领阿里云代金券" href="https://fzlyblog.cn" target="blank" rel="nofollow noopener">阿里云代金</a><a class="cms_link" title="常用优惠码及阿里云腾讯云老薛主机和学生服务器等优惠活动推荐" href="https://fzlyblog.cn target=" rel="nofollow noopener">优惠活动推荐</a><a class="grid_link" title="免费领取腾讯云代金券折扣券" href="https://fzlyblog.cn" target="_blank" rel="nofollow noopener">腾讯云代金券</a></div>
&nbsp;

效果三代码:

<div id="update_version"><a href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener"> <img title="投稿中心" src="https://fzlyblog.cn/wp-content/uploads/2021/09/ditan.jpg" alt="投稿网址" /></a>
<a class="blog_link" href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">投稿中心</a><a class="cms_link" href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">在线投稿</a><a class="grid_link" href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">联系博主</a></div>
&nbsp;
<div>
<a href="https://fzlyblog.cn/" target="_blank" rel="external nofollow noopener">点击在线投稿
</a>投稿邮箱:
<b></b>交流QQ群:
</div>
本文地址:https://fzlyblog.cn/97/
温馨提示:文章内容系作者个人观点,不代表反重力源对观点赞同或支持。
版权声明:本文为转载文章,来源于 懿古今,亲测吧 ,版权归原作者所有,支持原创!转载目的即为传递更多信息,若有来源标注错误或侵犯您的合法权益,请与反重力源(QQ:935782826)联系,本站将及时更正、删除,谢谢!
【腾讯云】买云服务器,参与礼品兑换、抽奖,最高送价值8000元IPad,还有Bose耳机、千元京东卡等您来!

发表评论


表情