前言:
最近在折腾我这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
文章声明:
1、文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系站长和小编,或者自行点击 投稿。
4、若文章中有侵权或不适当内容,请告知我们,本站会第一时间进行处理 免责申明。
1、文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,如发现有问题,请及时联系我们进行处理。
3、如果你有比较好的文章需要发布,可以联系站长和小编,或者自行点击 投稿。
4、若文章中有侵权或不适当内容,请告知我们,本站会第一时间进行处理 免责申明。