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

投稿  分钱榜 2016-11-28 阅读 67 次 评论 14 条

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

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

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>

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

本文地址:http://boke112.com/3667.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 分钱榜 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 橘子书
    橘子书 【镇长】 @回复

    好家伙,够厉害!哈哈

  2. 麦林风博客
    麦林风博客 【队长】 @回复

    不是太喜欢太华丽湖草的东西,自己感觉设计的不是太自然,有点不违和。

  3. 蚂蚁博客
    蚂蚁博客 【村长】 @回复

    只能说看个人喜好吧~

  4. 淘宝内部优惠券
    淘宝内部优惠券 【农民】 @回复

    这个可以有,看着还不错

  5. 小萝博客
    小萝博客 【市长】 @回复

    精神上支持一个

  6. 易淘金股票博客
    易淘金股票博客 【镇长】 @回复

    这个想法奇特啊

  7. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    [微笑] 既然是广告,还是让它展现吧,何必弄得这么麻烦与复杂呢?我个人是这样的认为的!

  8. 网际电脑
    网际电脑 【县长】 @回复

    1我要全站广告位

  9. 薅羊毛
    薅羊毛 【队长】 @回复

    投稿真好

  10. 王贱贱
    王贱贱 【村长】 @回复

    虽然用不上,但是还是要谢谢分享

  11. 龙笑天
    龙笑天 【县长】 @回复

    [强] 效果还不错~

  12. Koolight
    Koolight 【省长】 @回复

    厉害,广告王子。

  13. 分钱榜
    分钱榜 【镇长】 @回复

    [偷笑] 不好意思,霸屏了