使用方法

• • HTML代码放至：主题设置-文章&列表-文章页面-文章插入内容前 或 后处。
  • CSS代码放至：主题设置-全局&功能-自定义代码-自定义CSS样式

其他篇

将代码放到你想使用的位置即可。

代码

HTML代码

<div class="topics">
    <div class="topics-cont">
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen" target="_blank">
      <span>文字广告 </span>招租中
    </a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen" target="_blank">
      <span>文字广告 </span>招租中
    </a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen" target="_blank">
      <span>文字广告 </span>招租中
    </a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen" target="_blank">
      <span>文字广告 </span>招租中
    </a>
    </div>
</div>

双行版代码

<div class="topics">
   <div class="topics-cont">
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen&utm_campaign=adposition-1" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.xxx.com/?utm_source=tyhguansitewen&utm_campaign=adposition-2" target="_blank"><span>嗨自媒体博客</span> 官方推广</a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen&utm_campaign=adposition-3" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen&utm_campaign=adposition-4" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen&utm_campaign=adposition-5" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen&utm_campaign=adposition-6" target="_blank"><span>广告招租中</span> 点此</a>
        <a href="https://xxx.com/?utm_source=tyhguansitewen&utm_campaign=adposition-7" target="_blank"><span>聚合搜索</span> 官方推广</a>
        <a href="https://www.xxx.com/ad?utm_source=tyhguansitewen&utm_campaign=adposition-8" target="_blank"><span>广告招租中</span> 点此</a>
    </div>
</div>

CSS代码：

/*文字广告CSS样式代码开始*/
.topics {
	overflow: hidden;
	padding-bottom: 2px;
	border-radius: 3px;
	background: #32323200;
	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%;
	}
}
/*文字广告CSS样式代码结束*/

使用方法如下

<div class="xiaotblog_adk">
HTML广告代码
</div>