WordPress侧边栏添加简单的小模块[WP小工具]

源码概述：

很久以前在网上找到的，然后做了一些小修改。本来这个 gadget 模块是广告类型的，但是我感觉我的侧边栏很少被修改成我在线工具跳转的模块工具。这是一个非常简单的模块小工具，使用了 HTML 和 CSS 的组合。只需将小工具添加到站点后台的指定侧栏> >外观> >小工具> html 代码。

它可以用于广告侧边栏，获得利益，等等。
代码如下：

<a class="ads" href="https://www.huizhanii.com/web_tools" target="汇站网工具"  style="border-radius:5px;">
  <h4>汇站网小工具</h4>
  <h5>汇站推荐，安全有保障</h5>
  <span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>

资源

截图

转载请注明：汇站网 » WordPress 侧边栏添加简单的小模块[WP 小工具]