腾讯云服务器优惠活动华纳云香港服务器

如何给我们的博客添加一个折叠广告位

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

如何给我们的博客添加一个折叠广告位-第1张-boke112百科(boke112.com)

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

  1. /* 站点动态广告位 */
  2. #teamnewslist ol{list-style:none;padding-left14px;border-left2px solid #eee;font-size15px;color#666;}
  3. #teamnewslist b{font-size12px;font-weightnormal;color#999;displayblock;positionrelative;margin-bottom:5px;}
  4. #teamnewslist b::after{positionabsolute;top6px;left: –22px;content;width14px;height14px;border-radius: 50%;background-color#fff;border2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), –2px –2px 0 rgba(255,255,255,1)}
  5. #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
  6. #teamnewslist li:hover{color#555;}
  7. #teamnewslist li:hover b::after{border-color#C01E22;}
  8. #teamnewslist li:hover b{color#C01E22;}
  9. #teamnewslist{padding-left:33px;}
  10. #timedd dd{margin:0;padding:0;}
  11. #timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
  12. #timedd dt,dt a{width:100%;height:auto;display:block;font-weightbold;color:#333;font-size:18px;cursor:pointer;padding1px 0 0 14px;}
  13. #timedd dt a:hover{color#FF0000;}

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

  1. var number=2; //
  2. function LMYC() {
  3. var lbmc;
  4. for (i=1;i<=number;i++) {
  5. lbmc = eval(‘LM’ + i);
  6. lbmc.style.display = ‘none’;
  7. }
  8. }
  9. function ShowFLT(i) {
  10. lbmc = eval(‘LM’ + i);
  11. if (lbmc.style.display == ‘none’) {
  12. LMYC();
  13. lbmc.style.display = ;
  14. }
  15. else {
  16. lbmc.style.display = ‘none’;
  17. }
  18. }

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

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

  1. <div id=“timedd”>
  2. <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>
  3. <dd id=LM1>
  4. <div id=“teamnewslist”>
  5. <ol>
  6. —————你的广告1,我的广告列表你用不了,要用到CSS———————-
  7. </ol>
  8. </div>
  9. </dd>
  10. <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>
  11. <dd id=LM2 style=“DISPLAY: none”>
  12. <div id=“teamnewslist”>
  13. <ol>
  14. —————你的广告2,我的广告列表你用不了,要用到CSS———————-
  15. </ol>
  16. </div>
  17. </dd>
  18. </div>

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

赞 (0) 打赏
版权声明:本文为投稿文章,感谢 分钱榜 的投稿,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
香港云主机55元/年
wu