关闭

当前位置:首页 » wordpress、折腾 » 正文

给你的博客添加一个折叠广告位

没错,我又折腾广告位了。距离上一篇文章:给你的广告添加一个关闭按钮才不过4个多小时。原因是,我发现比关闭广告位效果还要好的做法是折叠广告位,读者们不想看时,点击可以折叠,读者们想看时,点击又可以展现,比单纯的关闭用户体验要好得多。不过等我折腾出来的时候,已经有人实现了这一功能,并且在我文章下留言了,晕倒,就是这篇文章:简单的JS实现点击一次关闭和点击一次展开。不过好歹折腾了这么久,我还是决定写出来纪念一下吧。折叠效果如下:

chubu


1、在我们所使用的WordPress主题的style.css文件最后面添加以下代码:






/* 站点动态广告位 */


#teamnewslist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;color: #666;}

#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}

#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}

#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}

#teamnewslist li:hover{color: #555;}

#teamnewslist li:hover b::after{border-color: #C01E22;}

#teamnewslist li:hover b{color: #C01E22;}

#teamnewslist{padding-left:33px;}

#timedd dd{margin:0;padding:0;}

#timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}

#timedd dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:18px;cursor:pointer;padding: 1px 0 0 14px;}

#timedd dt a:hover{color: #FF0000;}



 



2、然后我们来创建个写折叠的js.代码如下:


var number=2; //


function LMYC() {

var lbmc;

for (i=1;i<=number;i++) {

lbmc = eval('LM' + i);

lbmc.style.display = 'none';

}

}

function ShowFLT(i) {

lbmc = eval('LM' + i);

if (lbmc.style.display == 'none') {

LMYC();

lbmc.style.display = '';

}

else {

lbmc.style.display = 'none';

}

}

3、把这个JS文件放在主题目录的JS文件夹里面,不会写JS文件的,直接在JS文件夹随便下载一个,里面的内容换成以上代码。

4、在广告位时,请切换到文本模式, 然后按以下格式编辑内容:




<div id="timedd">


<dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;"><i class="fa fa-clock-o" aria-hidden="true"></i> 广告位1</a></dt>

<dd id=LM1>

<div id="teamnewslist">

<ol>

---------------你的广告1,我的广告列表你用不了,要用到CSS----------------------

</ol>

</div>

</dd>

<dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;"><i class="fa fa-clock-o" aria-hidden="true"></i> 你的广告2</a></dt>

<dd id=LM2 style="DISPLAY: none">

<div id="teamnewslist">

<ol>

---------------你的广告2,我的广告列表你用不了,要用到CSS----------------------

</ol>

</div>

</dd>

</div>

略显复杂,是根据懿古今时光轴记录修改版,增加折叠功能!这篇文章引申的,分钱榜底部的关于站长就添加了这个时光轴,所以以上步骤都省略了,只是顺便根据这个思路改了一个广告位代码而已。

本文来自 分钱榜 ,地址:https://www.fenqianbang.com/2384.html 未经授权,请勿转载

二维码