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

CMS教程评论229阅读模式

前言:

最近在折腾我这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>

预览:

WordPress彩色轮播文字广告代码和静态文字广告代码添加文章源自百科情报站-https://www.bkqbz.com/1906.html 文章源自百科情报站-https://www.bkqbz.com/1906.html

文章声明:
1、文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系站长和小编,或者自行点击 投稿。
4、若文章中有侵权或不适当内容,请告知我们,本站会第一时间进行处理 免责申明。
admin
  • 我们不提供免费技术支持,本文属于用户投稿。
  • 转载请务必保留本文链接:https://www.bkqbz.com/1906.html
评论  0  访客  0

发表评论