去除Blogbus日志广告

punkid wrote this on 2007-12-03 at 23:22 41 Comments

Blogbus放广告本无可厚非，但是扰人的事这日志下的广告往往不能和主题搭配的很好，尤其是那4个换行符带来的日志下的一大堆空白，怎么看也不太舒服。在这篇文章里我将用CSS和Javascript两种方式来分别hack(以新版模板系统下的模板为例)，达到除广告的目的(当然，我也会分别说明各自的优缺点)。此文仅供交流研究，绝无怂恿大家效仿之意

blogbusadcode

图上所示是Blogbus自带广告所生成的代码，关键不是那个table(也就是放广告的地方)，而是前后4个<br /> (换行符)造成的4行空白，实在是很不雅观

CSS方法

Easiest Way

去掉那个table很容易，也是已经被大家心照不宣的方法，将以下代码添加到CSS区域里就行了

div.postBody table {display:none;}

不过使用这方法后的代价是所有表格都看不到了，以至于有时需要在日志里添加表格数据都显示不了了。还有就是那4个空白行依然存在

Advanced Way, But Not Practical

精通CSS的朋友都应该对CSS3强大的选择器有所了解，通过E:nth-last-child可以很方便的隐藏广告和4个空白行，代码如下

.postBody br:nth-last-child(-n+4), .postBody table:nth-last-child(1) {display:none;}

其中br:nth-last-child(-n+4)表示从最后一个br算起倒数到第4个为止，为table:nth-last-child(1)则是最后一个table，也就是广告位置

但是，这个办法目前来看只是个理想化的东西，因为到目前为止只有Linux下的Konqueror，Mac下的Safari(Webkit Nightly Build)和Opera 9.5浏览器支持这个:nth-last-child选择器

为了至少让Firefox也能发挥点作用的话，可以加上这句CSS代码

.postBody br+br+br+table, .postBody br+br+br+table+br {display:none;}

这行CSS代码至少能把广告位的table和最后一个空白行隐藏了。之所以不再进一步写br+br+br,br+br甚至br是因为难免大家要用到换行符

Javascript方法

前面讲到的CSS方法都不尽理想，而下面提到的Javascript方法的话，不仅减少了浏览器带来的局限性，同时也能很好的删掉广告位和4个空白行。代码如下:

function getElementsByClass(searchClass,tag){
	var classElements = new Array();
	if (tag == null)
		tag = '*';
	var els = document.getElementsByTagName(tag);
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i=0,j=0;i<els.length;i++){
		if (pattern.test(els[i].className)) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

function removeAD(classname) {
	if(!getElementsByClass) return;
	if(!document.getElementsByTagName) return;
	if(!getElementsByClass(classname,'div')) return;
	var entry = getElementsByClass(classname,'div');
	if (entry.length != 1) return;
	var br = entry[0].getElementsByTagName('br');
	var table = entry[0].getElementsByTagName('table');

	table[table.length-1].style.display = 'none';
	for (var i=br.length-1;i>=br.length-4;i--) {
		br[i].style.display = 'none';
	}	
}	

window.onload = function() {
	removeAD('postBody');
}

我只讲下这段script的原理就是了，首先用getElementsByClass (via Dustin Diaz) 来获取日志区域，然后用getElementsByTagName来获取日志区域的br和table。

这里我们先需要特别判断下当前页面是否为单独页面还是首页，如果是首页(日志下无广告)，那我们直接跳出程序不要再浪费时间了。判断方法很简单，直接看下有多少篇日志区域就行了，如果算得日志块不等于1，那肯定不是单独页面了，直接跳出程序!

既然是单日志页面，那接下来要做的就是通过Javascript来间接添加CSS规则(display:none)从而隐藏广告和空白行。把最后一个table隐藏了，不用说，最后一个肯定是广告，然后把最后4个br隐藏了，就算这4个空白行不是系统生成的也无所谓，反正最后的空白行直接去除也不会影响正文显示

用Javascript方法是次优的办法，因为我之前也讲过，太多的Javascript会影响载入速度，所以我在设计这段script时尽量在不满足条件情况下就跳出程序，节省用户时间

留给大家探讨的方法

其实Javascript除广告我还有个思路，请大家先看blogbus的广告生成代码

today=new Date();jran=today.getTime();function rnd() {ia=9301;ic=49297;im=233280;jran=(jran*ia ic)%im;return jran/(im*1.0);};

function rand(number) {return Math.ceil(rnd()*number);};

for(i=1;i<=1;i  ) {myNum=(rand(1)); 

if(myNum == 1) document.write('<a href="http://5year.blogbus.com" target="_blank"><img width="468" height="60" border="0"  src="http://www.blogbus.com/images/news/2007/11-14/5year.jpg"></img></a>');

};

如果能让myNum不等于1的话，那就不会写入广告了。不过可恶的是，这段代码用的都是全局变量(It's evil!)，我至今也没找到个办法来修改其中某个变量...谁有思路呢?





Categorized under 实用小技巧 with blogbus javascript CSS 去广告 tagged.

41 Replied

  • 学习一下！
    NO.ONE wrote this at 2008-09-02 18:31:54 [回复]
  • 我的博客在这呢 http://hiecho.blogbus.com/ 旧模板

    一点日志就有个广告 晕死了 拜托拉 我不会的......
    punkid 回复 Echo 说：
    把代码里的postBody改为entryBody
    (2008-08-10 01:28:33)
    Echo wrote this at 2008-08-08 13:22:28 [回复]
  • 请问是把Javascript的代码放到哪？！~详细地方是？！
    谢谢~~~
    punkid 回复 LoNgwAy 说：
    我在这篇日志有介绍怎么加的
    http://blogbus-hack.blogbus.com/logs/10887066.html
    (2008-08-10 01:27:38)
    LoNgwAy wrote this at 2008-08-06 22:53:04 [回复]
  • 哈.已经去除了.
    谢谢!!
    草人 wrote this at 2008-07-22 23:13:59 [回复]
  • 用旧版系统,应该怎么破广告?
    我是坚持我的旧模版,自己改了代码准备搬来bus的,谁知有广告了...
    帮下忙吧..
    punkid 回复 草人 说：
    请至少告诉我具体情况或者你的blog地址
    (2008-07-22 21:15:45)
    草人 wrote this at 2008-07-21 23:08:05 [回复]
  • 请问我这边去广告那个代码该怎么改呢？

    postBody和class是代码里面要修改的地方么？

    研究了半天，还是没弄清。
    punkid 回复 JTT 说：
    把那段代码里的postBody替换为entryBody，具体请参考日志里的相关留言。
    (2008-07-11 12:55:57)
    JTT wrote this at 2008-07-11 10:29:15 [回复]
  • 這會兒沒了.....3Q
    MELODY wrote this at 2008-07-01 02:46:21 [回复]
  • 我用的是舊模版，放在header裏沒錯吧？

    然後把代碼最後的那個postbody改成sidecontent?

    我改了，還是沒反應.....
    punkid 回复 MELODY 说：
    把这句去掉if (entry.length != 1) return;
    (2008-06-30 23:09:36)
    MELODY wrote this at 2008-06-29 23:00:57 [回复]
  • 我把js加到header里面了，还是不行...{#face:13}
    punkid 回复 MELODY 说：
    把js里的postBody改为你模板里相应的sideContent
    (2008-06-29 19:43:35)
    MELODY wrote this at 2008-06-28 17:01:24 [回复]
  • 可是, 我仅仅是弄的日志子元素的啊, 大多数写日志, 怎么也会是现有 #xxx, 然后是 p, 里面再有 br 之类的吧?

    很少有人不用标签包裹住内容的啊

    除非, 确实有这样的人 -_-b

    至于你说的 IE6 不支持 CSS2 的那种选择符方式, 我发现只要嵌入一个 IE8.js 即可
    heeroyuyj wrote this at 2008-06-28 14:32:45 [回复]
  • 其实除了你说的方法之外, 还可以直接在 CSS 中定义, 连 js 都不用的

    当然了, 有两种方法, 一个就是直接 remove 掉日志节点里仅为子元素中所有的 table 以及和 table 并列的 br

    #xxx > * + br, #xxx > * + table

    但是呢, 貌似有些人并不喜欢这种做法, 那么就只有用第二种方法了

    #xxx > * + br, #xxx > * + table[width="468"][border="0"][align="center"][cellpadding="0"][cellspacing="0"] {
    display: none;
    }

    这种方法会将符合 width="468" & border="0" & align="center" & ... 的 table 元素以及和它并列的 br 元素隐藏

    效果还是不错的呃
    punkid 回复 heeroyuyj 说：
    #xxx < * + br会有副作用，把所有硬回车都给吞噬掉。

    table这个运用到CSS2的selectors还是个不错的方法的，除了该死的IE6....
    (2008-06-27 19:55:07)
    heeroyuyj wrote this at 2008-06-27 17:17:39 [回复]
  • {#face:13}

    貌似是佫菜鳥。。。淚奔
    annafaris wrote this at 2008-06-27 03:26:13 [回复]
  • 问好博主～
    请问你知道如何去处首页（不是日志里的）那张
    http://public.blogbus.com/images/reg_side.gif
    的广告吗？
    它在联接板块和访问量中间。
    我去掉了Feed那些，可是这个去不掉。
    期待博主的回复。^^
    punkid 回复 nano 说：
    在首页布局里去掉"兑换空间活动"的模块
    (2008-05-31 21:12:34)
    nano wrote this at 2008-05-31 20:59:37 [回复]
  • 可能是我比较笨哦~我用了你的CSS方法加入了div.postBody table {display:none;} 到CSS里 可是评论页面还是有一条广告吖？~？~怎么回事呢~
    punkid 回复 miniomiffy 说：
    因为你并没有把代码成功加进到CSS里
    (2008-05-12 14:52:03)
    miniomiffy wrote this at 2008-05-12 14:11:03 [回复]
  • 我用punkid教的JAVA的方法去掉了广告，超好用哦！
    忆瀞 wrote this at 2008-04-27 17:48:18 [回复]
  • 恩，这个了解。

    现在这个狗皮膏药终于去掉了，再次感谢punkid，以后还有很多要向你学习的。
    天使玫瑰 wrote this at 2008-04-26 23:01:44 [回复]
  • 晕，我是直接放在那个header模板文件里了。因为在LOG那个模板文件里，<head>....</head>之间有“<!-- ~ header ~ -->”
    punkid 回复 天使玫瑰 说：
    那意味着这个script在非日志页面也会发生作用，当然这点小程序对性能影响其实并不明显的。
    (2008-04-26 22:47:00)
    天使玫瑰 wrote this at 2008-04-26 21:41:25 [回复]
  • 我晕了，你说的HEADER是指BUS后台模板设置里的那个HEADER文件，还是指文件里的<head>....</head>？
    punkid 回复 天使玫瑰 说：
    模板文件里的
    (2008-04-26 20:46:38)
    天使玫瑰 wrote this at 2008-04-26 19:54:26 [回复]
  • 又发现问题，是不是可以把那段代码缩减下，如果直接把代码+在LOG页，而不是HEADER的话，不是可以省去很多判定的步骤吗？
    punkid 回复 天使玫瑰 说：
    严谨点的话是推荐把代码放到<head>....</head>里，而不是随意放到页面的任何位置。

    如果你的LOG里有写head的话就可以放进去，否则的话还是建议放到HEADER里，浏览器渲染页面是从上到下的，从head开始然后才是正文部分，所以从优先级来看会比放到页面中要快。
    (2008-04-26 19:27:04)
    天使玫瑰 wrote this at 2008-04-26 19:03:05 [回复]
  • 原来这样，这年头有点文化知识就是好。长知识了，再次感谢punkid！
    天使玫瑰 wrote this at 2008-04-26 19:00:45 [回复]
  • 终于成功了！感谢punkid！准备在BLOG里发个贴专门感谢punkid你的帮助！

    想问下最后删掉那句话原本是派什么用处的？为什么+在我的BLOG里就没效果？
    punkid 回复 天使玫瑰 说：
    那句代码的作用本来是用来判定当前页面是否单日志页面，如果不是就直接跳出程序，不继续执行下面的去除广告了，从而节省不必要的响应时间。

    但是问题是你的模板其实已经是过时的表格布局代码，所以class的命名方式有点乱，在单日志页面里出现了两次logsMain的表格框，所以直接跳出了程序不执行下面去广告的代码了。
    (2008-04-26 18:52:31)
    天使玫瑰 wrote this at 2008-04-26 17:51:20 [回复]
  • punkid，JS已经加进去，麻烦你看下。谢谢！
    punkid 回复 天使玫瑰 说：
    你把其中这句去掉应该就可以了 
    if (entry.length != 1) return;

    (2008-04-26 17:37:00)
    天使玫瑰 wrote this at 2008-04-26 16:51:35 [回复]
  • 因为没有成功，所以我就把JS删了。我是把上传JS，然后在header里引用JS的。那我现在再去加进去，麻烦你帮忙看看？
    天使玫瑰 wrote this at 2008-04-26 16:45:56 [回复]
  • 郁闷死了，我把DIV改TD了，可还是没反应……是不是还需要改什么内容啊？
    PS：去忆瀞的BLOG上逛了圈，怎么也还是有广告的啊？不是说已经成功了吗？
    punkid 回复 天使玫瑰 说：
    我看了下你的blog页面源代码，貌似是没有把js成功加进去，请问你是怎么加的?

    忆瀞好像是换了块模板。
    (2008-04-26 16:23:45)
    天使玫瑰 wrote this at 2008-04-26 13:24:20 [回复]
  • 有用有用！终于有用了！哈哈，谢谢punkid！
    忆瀞 wrote this at 2008-04-26 12:20:01 [回复]
  • table {display:none;}可行，但关键是<br />去不掉，这样一来效果比有广告条更难看。
    我快要放弃了，这个去广告HACK我研究了N个小时了，难道因为我是老版本的模板，所以不能用那个Javascript？哭……

    PS：class确实是“logsMain”，我刚才用Element Hiding Helper看过了，没错。但就是没效果。。。
    punkid 回复 天使玫瑰 说：
    你再回到那个script里，把这两句里的div换成td 

    	if(!getElementsByClass(classname,'div')) return;

    	var entry = getElementsByClass(classname,'div');

    然后removeAD('')里面还是logsMain

    应该有用了，我用firebug试了下。
    (2008-04-26 12:37:51)
    天使玫瑰 wrote this at 2008-04-25 23:09:14 [回复]
  • 试过了，没用。这下郁闷了。还有没有其他方法？
    punkid 回复 天使玫瑰 说：
    一个简单的办法，CSS里加上这句 
    td.logsMain table {display:none;}

    (2008-04-25 22:07:44)
    天使玫瑰 wrote this at 2008-04-25 17:24:21 [回复]
  • 我准备用Javascript除广告，但是遇到了问题，想请教下，因为我的BLOG是自定义的老模板，我自己都不清楚class是什么，能麻烦帮我看下吗？
    先谢谢了哈！
    punkid 回复 天使玫瑰 说：
    试下logsMain
    (2008-04-25 01:21:01)
    天使玫瑰 wrote this at 2008-04-25 01:00:19 [回复]
  • 我确实加了呀~~不过现在我按你说的办法上传了文件，然后放进HEADER里了，可是居然还是没有用~~
    http://dianeyoung.blogbus.com/logs/19450467.html
    文件地址是这个，应该是对的~
    http://kissdolphin.blogbus.com/files/12089155330.js
    punkid 回复 忆瀞 说：
    你的class应该是entryBody2
    (2008-04-23 10:22:38)
    忆瀞 wrote this at 2008-04-23 09:55:00 [回复]
  • 我已经加了代码，是这个地址~谢谢啦！
    http://dianeyoung.blogbus.com/
    punkid 回复 忆瀞 说：
    不对，你的代码应该是没加进去，我看了页面代码没有这段js。
    或者你可以试下这个办法，把里面的代码保存为以js为后缀的文件，上传到bus里，然后在header里加入
    <script type="text/javascript" src="http://js文件地址"></script>
    (2008-04-22 18:26:44)
    忆瀞 wrote this at 2008-04-22 15:11:40 [回复]

  • 评论分页：共2页 1 2 下一页 最后一页

Leave a Reply

{#face:1} {#face:2} {#face:3} {#face:4} {#face:5} {#face:6} {#face:7} {#face:8} {#face:9} {#face:10} {#face:11} {#face:12} {#face:13} {#face:14} {#face:15}

About

这是一个致力于挖掘，完善blogbus功能，分享blogbus小技巧和非官方资源的博客。所谓"hack"，就是在官方未能达到实现某种功能之前，自己通过各种"邪门歪道"来实现它。

欢迎有兴趣的朋友加入到这个博客中来，一同完善这个站，提供更多有用的资源/技巧给blogbus用户们。

这是我的e-mail联系地址(Dont Spam It for God's Sake):

punkid.online@gmail.com

Miscellaneous