Loading
0

wordpress主题如何在侧栏添加广告样式代码?

公众号搜索菜鸟站长之家

WordPress主题侧栏小工具添加广告代码,很久就想搞了,用来引流我的VPS网站上,代码是从网上来的,只是简单改了合我审美观而已。

效果图:

下面看看怎么添加的吧!

后台小工具里在你需要显示的地方添加html小工具,切换为文本模式,将下面代码复制到里面保存即可。

<a class="ads" rel="external nofollow" target="_blank" href="https://www.cnzzzj.com/wp-content/themes/wpdx/customfun/other/go.php?url=aHR0cDovL3d3dy56end2cHMuY29tLw==" target="站长屋VPS">
  <h4>站长屋VPS</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>
</a>

里面的网址自行替换即可。

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
4、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。