WordPess教程-侧边栏产品推荐文字广告小工具html代码

先看下效果：

食用教程

1.把下面复制到WordPress后台–>小工具–>选择html代码–>放到你需要放的位置

2.把下面代码复制到主题后台–>自定义代码–>自定义CSS样式-2022.1.5修复给背景改成透明色

/*懒人资源网*lanrenn.cn/
/*<a href="https://www.lanrenziyuan.cn" title="【查看含有[侧边栏]标签的文章】" target="_blank">侧边栏</a>主题推荐*/
.widget {
    clear: both;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}
.widget_product {
    background: #fff;
    background-color:transparent;/*透明色*/
}
.product_content {
    padding: 15px;
}
.product_info h2 {
    font-size: 20px;
    margin: 0;
    font-weight: bold;
    padding: 5px 0 10px 0;
}
.widget ul {
    zoom: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.product_info>ul>li {
    font-size: 13px;
    margin-bottom: 28px;
    list-style: none;
}
.price_sale {
    border-top: 1px solid #eee;
    padding: 10px 0px;
}
.price_sale strong {
    float: right;
    font-size: 20px;
    line-height: 1;
    font-weight: 100;
}
small, .small {
    font-size: 85%;
}
.price_sale h2 {
    margin: 0;
    font-size: 14px;
    color: #999;
    line-height: 20px;
}
.product_content>.btn {
  top: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
  background: linear-gradient(-125deg,#54e38e 0%, #41c7Af 100%);
  box-shadow: 0 3px 10px -1px #41c7Af!important;
    color: #ffffff;
}
/*侧边栏主题推荐*lanrenn.cn/
/*懒人资源网*lanrenn.cn/
/*<a href="https://www.lanrenziyuan.cn" title="【查看含有[侧边栏]标签的文章】" target="_blank">侧边栏</a>主题推荐*/
.widget {
    clear: both;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;

}
.widget_product {
    background: #fff;
    background-color:transparent;/*透明色*/
}
.product_content {
    padding: 15px;

}
.product_info h2 {
    font-size: 20px;

    margin: 0;
    font-weight: bold;
    padding: 5px 0 10px 0;

}
.widget ul {
    zoom: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.product_info>ul>li {
    font-size: 13px;
    margin-bottom: 28px;
    list-style: none;
}
.price_sale {
    border-top: 1px solid #eee;
    padding: 10px 0px;
}
.price_sale strong {
    float: right;
    font-size: 20px;
    line-height: 1;
    font-weight: 100;
}
small, .small {
    font-size: 85%;
}
.price_sale h2 {
    margin: 0;
    font-size: 14px;
    color: #999;
    line-height: 20px;
}
.product_content>.btn {
  top: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
  background: linear-gradient(-125deg,#54e38e 0%, #41c7Af 100%);
  box-shadow: 0 3px 10px -1px #41c7Af!important;
    color: #ffffff;

}

/*侧边栏主题推荐*lanrenn.cn/
/*懒人资源网*lanrenn.cn/
/*<a href="https://www.lanrenziyuan.cn" title="【查看含有[侧边栏]标签的文章】" target="_blank">侧边栏</a>主题推荐*/
.widget {
    clear: both;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;

}
.widget_product {
    background: #fff;
    background-color:transparent;/*透明色*/
}
.product_content {
    padding: 15px;

}
.product_info h2 {
    font-size: 20px;

    margin: 0;
    font-weight: bold;
    padding: 5px 0 10px 0;

}
.widget ul {
    zoom: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.product_info>ul>li {
    font-size: 13px;
    margin-bottom: 28px;
    list-style: none;
}
.price_sale {
    border-top: 1px solid #eee;
    padding: 10px 0px;
}
.price_sale strong {
    float: right;
    font-size: 20px;
    line-height: 1;
    font-weight: 100;
}
small, .small {
    font-size: 85%;
}
.price_sale h2 {
    margin: 0;
    font-size: 14px;
    color: #999;
    line-height: 20px;
}
.product_content>.btn {
  top: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
  background: linear-gradient(-125deg,#54e38e 0%, #41c7Af 100%);
  box-shadow: 0 3px 10px -1px #41c7Af!important;
    color: #ffffff;

}

/*侧边栏主题推荐*lanrenn.cn/

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

© 版权声明

懒人资源网

"想做一件任何人都可以做的事情"

打赏作者

订阅

使用手机扫码阅读这篇文章

本文是原创文章，采用CC BY-NC-SA 4.0协议，完整转载请注明来自懒人资源网