WordPress彩色轮播文字广告代码和静态文字广告代码添加

前言：

最近在折腾我这WordPress知更鸟主题的时候在网上看到朋友的站，有个彩色动态的广告代码挺好看的，于是我就搬过来了，分享给有需要的朋友。

教程：

图上的第一个静态文字广告直接添加代码到你想要展示的位置即可，代码如下：文章源自百科情报站-https://www.bkqbz.com/1906.html

<!--文字广告开始-->
<style>.txtguanggao{width: 102%;overflow: hidden;display: block;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}.txtguanggao a{width: 24.30%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 14px;color: #fff;display: inline-block;background-color: rgb(255, 153, 159);margin: 2.5px;transition-duration: .3s;}.txtguanggao a:nth-child(1) {background-color: #dc3545;}.txtguanggao a:nth-child(2) {background-color: #007bff;}.txtguanggao a:nth-child(3) {background-color: #28a745;}.txtguanggao a:nth-child(4) {background-color: #424444;}.txtguanggao a:nth-child(5) {background-color: #28a745;}.txtguanggao a:nth-child(6) {background-color: #424444;}.txtguanggao a:nth-child(7) {background-color: #dc3545;}.txtguanggao a:nth-child(8){background-color: #007bff;}.txtguanggao a:hover{background:#FF2805;color:#FFF}@media screen and (max-width: 1000px) {.txtguanggao a{width: 47.96%;float: left;border-radius: 2px;line-height: 35.35px;height: 35.35px;text-align: center;font-size: 14px;color: #fff;display: inline-block;background-color: rgb(255, 153, 159);margin: 2.5px;transition-duration: .3s;}} </style>
 
<div class="txtguanggao">
<a href="https://www.cnzzzj.com/" target="_blank" rel="nofollow" class="dh" alt="11.24">菜鸟站长之家</a>
<a href="https://www.bkqbz.com/m3u8/" target="_blank" rel="nofollow" class="dh" alt="12.2">m3u8解析</a>
<a href="https://www.bkqbz.com/yyxz.html"  target="_blank" rel="nofollow" class="dh" alt="12.01">音乐下载</a>
<a href="https://www.bkqbz.com/sites/xjj/" target="_blank" rel="nofollow" class="dh" alt="10.29">美女小视频</a>
<a href="https://www.bkqbz.com/dyjx.html" target="_blank" rel="nofollow" class="dh" alt="12.2">抖音去水印</a>
<a href="https://www.zzwvps.com/" target="_blank" rel="nofollow" class="dh" alt="12.3">站长屋VPS</a>
<a href="/ggtf.html" target="_blank" rel="nofollow" class="dh" alt="11.4">广告位出租</a>
<a href="/ggtf.html"  target="_blank" rel="nofollow" class="dh" alt="10.29">广告位出租</a>
 </div>

第二个动态文字广告首先添加CSS代码到主题主CSS后者有自定义功能的主题添加到自定义里也是可以的，文章源自百科情报站-https://www.bkqbz.com/1906.html

CSS代码：

.topics {
	overflow: hidden;
	padding-bottom: 2px;
	border-radius: 3px;
	background: #fff;
	text-align:center;

}
.topics, ._m0j3jr2yhu8 {
    margin-bottom: 15px;
}
.topics .topics-cont {
	margin-bottom: 8px;
}

.topics .topics-cont a {
	display: inline-block;
	margin: 10px 10px 0 10px;
	padding: 2px 5px;
	border-radius: 3px;
	color: #656565;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1.8;
	background:#eee;
}

.topics .topics-cont a span {
	color: #fe5b34;
	font-family: "Microsoft YaHei",Helvetica,Arial,"WenQuanYi Micro Hei",SimSun,sans-serif;
}

.topics .topics-cont a:hover {
	background-color: #d806da;
	background-image: -webkit-linear-gradient(left,#9796f0 0,#d806da 50%,#ff5757 100%);
	background-image: linear-gradient(to right,#9796f0 0,#d806da 50%,#ff5757 100%);
	color: #fff;
}

.topics .topics-cont a:hover span {
	color: #fff;
}

.topics .topics-cont a:nth-child(1),.topics .topics-cont a:nth-child(2),.topics .topics-cont a:nth-child(3),.topics .topics-cont a:nth-child(4),.topics .topics-cont a:nth-child(5),.topics .topics-cont a:nth-child(6),.topics .topics-cont a:nth-child(7),.topics .topics-cont a:nth-child(8) {
	animation: topic-animate 16s ease infinite;
}

.topics .topics-cont a:nth-child(1) span,.topics .topics-cont a:nth-child(2) span,.topics .topics-cont a:nth-child(3) span,.topics .topics-cont a:nth-child(4) span,.topics .topics-cont a:nth-child(5) span,.topics .topics-cont a:nth-child(6) span,.topics .topics-cont a:nth-child(7) span,.topics .topics-cont a:nth-child(8) span {
	animation: topic-animate-span 16s ease infinite;
}

.topics .topics-cont a:nth-child(2) {
	animation-delay: 2s;
}

.topics .topics-cont a:nth-child(2) span {
	animation-delay: 2s;
}

.topics .topics-cont a:nth-child(3) {
	animation-delay: 4s;
}

.topics .topics-cont a:nth-child(3) span {
	animation-delay: 4s;
}

.topics .topics-cont a:nth-child(4) {
	animation-delay: 6s;
}

.topics .topics-cont a:nth-child(4) span {
	animation-delay: 6s;
}

.topics .topics-cont a:nth-child(5) {
	animation-delay: 8s;
}

.topics .topics-cont a:nth-child(5) span {
	animation-delay: 8s;
}

.topics .topics-cont a:nth-child(6) {
	animation-delay: 10s;
}

.topics .topics-cont a:nth-child(6) span {
	animation-delay: 10s;
}

.topics .topics-cont a:nth-child(7) {
	animation-delay: 12s;
}

.topics .topics-cont a:nth-child(7) span {
	animation-delay: 12s;
}

.topics .topics-cont a:nth-child(8) {
	animation-delay: 14s;
}

.topics .topics-cont a:nth-child(8) span {
	animation-delay: 14s;
}

.topics .topics-cont:hover a,.topics .topics-cont:hover a span {
	animation: none;
}

@keyframes topic-animate {
	0%,12.5% {
		background: #fff;
		color: #555;
	}

	10%,2% {
		background-color: #d806da;
		background-image: -webkit-linear-gradient(left,#9796f0 0,#d806da 50%,#ff5757 100%);
		background-image: linear-gradient(to right,#9796f0 0,#d806da 50%,#ff5757 100%);
		color: #fff;
	}
}

@keyframes topic-animate-span {
	0%,12.5% {
		color: #fe5b34;
	}

	10%,2% {
		color: #fff;
	}
}
.topics-cont a {
    width: 20%;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width:1200px){
	.topics-cont a{
		width: 30%;
	}
}
@media (max-width:550px){
	.topics-cont a{
		width: 40%;
	}
}

广告代码根据自己的需求改下内容：文章源自百科情报站-https://www.bkqbz.com/1906.html

<div class="topics">
   <div class="topics-cont"> 
    <a href="https://www.bkqbz.com/jyjc/cmsjc/" target="_blank"><span>CMS</span> 美化提速教程</a>
    <a href="https://www.bkqbz.com/sites/xjj/" target="_blank"><span>美女</span> 小姐姐视频</a>
    <a href="https://www.bkqbz.com/jxym/ysym/" target="_blank"><span>影视源码</span> 苹果CMS模板</a>
    <a href="https://www.bkqbz.com/dyjx.html" target="_blank"><span>抖音在线</span> 去水印工具</a>
    <a href="https://www.bkqbz.com/pcbk/vpszj/" target="_blank"><span>vps推荐</span> 实用免费vps分享</a>
    <a href="https://www.bkqbz.com/aztjfw.html" target="_blank"><span>环境搭建</span> 技术支持服务</a>
    <a href="https://www.bkqbz.com/yyxz.html" target="_blank"><span>全网音乐</span> 下载工具</a>
    <a href="https://www.bkqbz.com/ggtf.html" target="_blank"><span>广告合作</span> 面议</a>
   </div>
  </div>

预览：

文章源自百科情报站-https://www.bkqbz.com/1906.html 文章源自百科情报站-https://www.bkqbz.com/1906.html