当前位置：首页 > 网络教程 > 正文

给你的zibll主题加个广告功能支持开关【网络教程】

小虎
网络教程
2023-02-21
539

效果截图

给你的zibll主题加个广告功能支持开关【网络教程】第1张

CSS代码：（适用于广告区域的CSS代码用来好看装逼的不然直接用img修饰了）
js代码：（用来隐藏和展开广告的html标签）

1.首先布局好CSS

在zibll主题后台设置当中嵌入如下代码

/**core 镇北府博客广告区域CSS样式*/
.dbgg {background:#fff;padding:3px 3px 3px;overflow:hidden;}
.dbgg a{display:block;width:33.1%;height:5pc;margin-right:4px;margin-bottom:2px;float:left;position:relative}
.dbgg span a,.index-top-ad span a img{display:block;width:100%;height:48px;overflow:hidden}
.index-top-ad { margin:-5px auto; background:#fff;padding:3px 3px 3px;width:/*75pc*/;overflow:hidden;}
.index-top-ad a{display:block;width:33.1%;height:5pc;margin-right:4px;margin-bottom:4px;float:left;position:relative}
.index-top-ad a:before{position:absolute;content:" ";width:26px;height:1pc;background:url(../images/watermark.png);right:0;font-size:9pt;text-align:center;bottom:0;color:#fff}
.index-top-ad a img{width:100%;height:5pc!important;z-index:1}
.index-top-ad a:nth-child(3n+0){margin:0}
.index-top-ad span a,.index-top-ad span a img{display:block;width:100%;height:48px !important;overflow:hidden}
.index-top-ad span{margin-bottom:-1px;float:left;width:49.9%}
.index-top-ad span:nth-child(2n+0){float:right}
.index-top-ad p{display:block;width:1180px;overflow:hidden}
.index-top-ad p a{width:100%}
@media screen and (min-width: 800px){
    .dbgg span a, .index-top-ad span a img,.index-top-ad span a, .index-top-ad span a img{
        height: 65px !important;
    }
}
.textad {
    background: #ffffff;
    width: 100%;
}
.textad {
    table-layout: fixed;
}
.textad>div {
    float: left;
    width: 25%;
}
.textad>div a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px;
    text-align: center;
    font-size: 10px;
    height: 33px;
    line-height: 33px;
    color: #ffffff;
    border-radius: 3px;
}
.textad>div a:nth-child(8n-7) {
    background: #1e9fff;
}
.textad>div a:nth-child(8n-6) {
    background: #f9581b;
  }
.textad>div a:nth-child(8n-5) {
    background: #fb5b5b;
}

.Textdiv {
    margin: 8px 0
}

.Text-Advertising {
    position: relative;
    clear: both;
    overflow: hidden;
    padding: 8px 2px;
    width: 100%;
    background: #fff;
    animation: shine 1s infinite linear
}

.Text-Advertising ul {
    position: relative;
    z-index: 2;
    float: left;
    width: 20%
}

.Text-Advertising li {
    padding: 3px 0;
    width: 100%;
    text-align: center;
    font-size: 12px
}

.Text-Advertising:after {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 0;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: #fff;
    content: ''
}

.Text-Advertising:before {
    position: absolute;
    left: -200%;
    z-index: 3;
    width: 300%;
    height: 50px;
    background-color: rgba(255, 255, 255, .4);
    background-image: linear-gradient(0, transparent 20%, rgba(255, 255, 255, .4) 50%, transparent 80%);
    content: "";
    transform: rotate(-60deg);
    animation: searchLights 3s ease-in 3s infinite;
    pointer-events: none
}

2.添加小工具

 <!--开关广告-->
<div class="ad_show_clone"
    style="z-index: 1000;line-height: 2;cursor: pointer;background:#040404;color: #fff;width: 25px;text-align: center;padding-top: 5px;padding-bottom: 5px;border-radius: 5px;position: fixed;left: 5px;top:265px;">
    关闭广告
  </div>
  <!--开关广告-->
  <!--广告-->
<div id="sigunet" style="box-shadow: 0 0 10px var(--main-shadow);">
   
     <div class="dbgg">
<span><a href=" http://www.ldw6.com/t.php?url=https://k.youshop10.com/8wQWxeZ7" rel="nofollow" target="_blank"><img src="https://cos.sigunet.com/sigunet/2022/03/a493b34a8d26450888f991d928d5991d.gif" width="100%" height="60px" title="" ></a></span>
      <span><a href=" http://www.ldw6.com/t.php?url=https://k.youshop10.com/8wQWxeZ7" rel="nofollow" target="_blank"><img src="https://cos.sigunet.com/sigunet/2022/03/a493b34a8d26450888f991d928d5991d.gif" width="100%" height="60px" title="" ></a></span>
      
</div>
 <div class="index-top-ad">
 <span><a href=" http://www.ldw6.com/t.php?url=http://dy.sigu.vip" rel="nofollow" target="_blank"><img src="https://cos.sigunet.com/sigunet/2022/03/a493b34a8d26450888f991d928d5991d.gif" width="100%" height="100%" title="" ></a></span>
    <span><a href=" http://www.ldw6.com/t.php?url=http://dy.sigu.vip" rel="nofollow" target="_blank"><img src="https://cos.sigunet.com/sigunet/2022/03/a493b34a8d26450888f991d928d5991d.gif" width="100%" height="100%" title="" ></a></span>
  

</div>
<div class="index_ad">
    <div class="textad layui-clear">
        <!--第1列-->
        <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a>  </div>
      <!--第2列------>
       <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a>  </div>
      <!--第3列------>
       <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a>  </div>
      <!--第4列-->
       <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=87413003&site=qq&menu=yes" target="_blank">文字广告位出租</a>  </div>
      </div>
          <div class="Textdiv Text-Advertising">
        <!--第1列-->
        <ul class="list-unstyled">
        <li> <a href="/go.php?url=https://kashichang.cn/su/mMnI7" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 手机靓号免费领全国包邮</span> </a> </li>
<li> <a href="/ad.html" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 文字广告位招租50/个</span> </a> </li>  </ul>
      <!--第2列------>
        <ul class="list-unstyled">
        <li> <a href="/go.php?url=https://m.xili0033.com:9104/register?id=89304088
" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 风靡全球的热门给力游戏 </span> </a> </li>
<li> <a href="/ad.html" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 文字广告位招租50/个</span> </a> </li>
  </ul>
      <!--第3列------>
        <ul class="list-unstyled">
        <li> <a href="/go.php?url=https://shimo.im/docs/WpqQPcHdVckHR9pJ
" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 【推荐】香烟八年总仓 包邮包补！  </span> </a> </li>
<li> <a href="/ad.html" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 文字广告位招租50/个</span> </a> </li>
  </ul>
      <!--第4列-->
        <ul class="list-unstyled">  
        <li> <a href="/go.php?url=https://docs.qq.com/doc/DSE5SblprTnFITWti?friendUin=%252FTJYso3ngIW4eUub4ZDEpQ%253D%253D&ADUIN=392113145&ADSESSION=1599050861&ADTAG=CLIENT.QQ.5761_.0&ADPUBNO=27041&jumpuin=392113145" rel="nofollow" target="_blank"> <span style="color:#FF0033;">【推荐】 暴利稳赚项目30撸小千  </span> </a> </li>
<li> <a href="/ad.html" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 文字广告位招租50/个</span> </a> </li>
  </ul>
      <!--第5列------>
        <ul class="list-unstyled">    
        <li> <a href="/go.php?url=https://www.lanzoui.com/iVNbqga8v3i" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 多功能鲸鱼APP人手必备</span> </a> </li>
<li> <a href="/ad.html" rel="nofollow" target="_blank"> <span style="color:#FF0033;"> 文字广告位招租50/个</span> </a> </li>
  </ul>
      </div>
     </div> 
 </div>
  <!--广告结束-->
    <!--隐藏盒子-->
<script>
document.getElementById("sigunet").parentNode.parentNode.style.padding=0;
</script>
    <!--隐藏盒子结束-->

3.添加开关广告的js代码

<SCRIPT language="JavaScript">
    var addd = document.querySelector('.ad_show_clone')
    addd.onclick = function () {
      if (addd.innerHTML.indexOf('关闭广告') !== -1) {
        document.querySelector('.dbgg').style.display = 'none'
       document.querySelector('.index-top-ad').style.display = 'none'
      document.querySelector('.index_ad').style.display = 'none'
        addd.innerHTML = '开启广告'
      } else {
        document.querySelector('.dbgg').style.display = 'block'
        document.querySelector('.index-top-ad').style.display = 'block'
        document.querySelector('.index_ad').style.display = 'block'
        addd.innerHTML = '关闭广告'
      }
    }
</SCRIPT>

把这段js代码放到子比主题设置中自定义代码的自定义底部HTML代码中！

教程到这里也就结束了，喜欢记得多多点赞关注！

本文由小虎于2023-02-21发表在皮皮云科技，如有疑问，请联系我们。
本文链接：https://pipiy.cn/post/99.html

上一篇
使用自签名证书防止服务器IP地址泄露【免费教程】

下一篇
ios京东小组件教程【苹果小组件】

给你的zibll主题加个广告功能支持开关【网络教程】

效果截图

1.首先布局好CSS

发表评论取消回复