给你的子比主题加个广告功能

直接上图

正常打开效果

0eac6fb735783176023cfd10bd727072

关闭后效果

3d3ee55e1b7f4df4d9a99b01726e93ed

用到哪些代码呢?答:css+js+html

CSS代码:(适用于广告区域的CSS代码用来好看装逼的不然直接用img修饰了)

js代码:(用来隐藏和展开广告的html标签)

 

好了不废话直接上代码 馋起来!!

1.首先布局好CSS

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

/**core 思古网广告区域CSS样式byqq 202700037*/
.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.添加小工具

在wp后台中输入选择 外观-小工具 – 添加自定义html,选择添加到首页顶部全宽并输入如下代码(可根据自己需要,来选择展示位置!):


 <!--开关广告-->
<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&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a>	</div>
      <!--第2列------>
       <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a>	</div>
      <!--第3列------>
       <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a>	</div>
      <!--第4列-->
       <div>
        <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;menu=yes" target="_blank">文字广告位出租</a> <a rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&amp;uin=87413003&amp;site=qq&amp;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&amp;ADUIN=392113145&amp;ADSESSION=1599050861&amp;ADTAG=CLIENT.QQ.5761_.0&amp;ADPUBNO=27041&amp;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代码中!

然后保存返回看效果!!!

THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
admin的头像-思古娱乐网

昵称

取消
昵称表情代码图片