在WordPress博客侧栏博客小工具添加漂亮的广告样式代码。教程:后台小工具里在需要显示的地方添加html小工具,切换为文本模式,将下面代码复制到里面保存即可。
<a class="ads" href="https://wpwe.net/" target="免费领优惠券" rel="noopener noreferrer">
<h4>免费领优惠券</h4>
<h5>wppu推荐,安全有保障</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>
<h4>免费领优惠券</h4>
<h5>wppu推荐,安全有保障</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>