`
shz2008bj
  • 浏览: 481012 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSDN博客里面挂广告的推荐方法

Google.netIEFirefoxCSS 
阅读更多
CSDN博客里面挂广告的推荐方法
此文章版权归JAVA世纪网(JAVA2000.net)和CSDN(CSDN.NET)所有.
JAVA世纪网地址：http://www.java2000.net/p10652
CSDN博客地址：http://blog.csdn.net/java2000_net/archive/2008/10/04/3015606.aspx
如转载，请保留此说明和完整的页面内容。


感谢 



前言
大家应该注意到了，在CSDN的博客里面并没有挂CSDN自己的广告，我们感谢CSDN的无私奉献，我们应继续支持CSDN。

那我们不要浪费CSDN的好意了，我们来看看如果把自己的广告放到里面去。

一、前提条件
CSDN的页面支持自定义的配置
CSDN的页面内容支持比较完整的JS代码。

二、简单的方式、

1 帖子里面直接书写广告代码

你可以在源代码的模式下面，直接放入你要加入的广告代码。比如：


此方法的优点是，你可以最大限度的控制格式，加入你能加入的任何广告代码。
缺点，每次发帖都要排版，如果你更换个广告，则以前的帖子必须重新编辑一遍。

2 帖子里面外挂js文件
和1区别不大，你直接在源代码里面用自己的动态JS代码。比如


优点：可以更灵活的修改广告代码。但
缺点：有些广告代码会有些小问题。更重要的是你需要一个稳定的外部服务器空间。如果服务器变动，你的所有帖子仍需要编辑。

3 在配置里面直接书写广告
大部分人都是这样直接


优点：一次修改可以影响所有的帖子
缺点：位置限制在左侧，切有点太窄了。


二、我推荐使用的方式
继续在配置里面书写广告，但广告并不局限于显示在左侧，而是可以移动到你需要的位置。比如：
顶部的右上，那个搜索的附近；
帖子内容的开始；
帖子内容的结束
评价的开始
评价表单右侧
整个页面的底部

我们来看所需要的技术。
1 如何定位广告的位置
请看如下的代码
查看复制到剪切板打印
// 获取页面某个元素对象  
// 我这里使用了id属性，你也可以用其它的方法获得元素对象  
var t = document.getElementById("Anthem_Post.ascx_PostComment_CommentUpdatePanel__");  
 
// 获得左侧，顶部和上级对象  
objLeft = t.offsetLeft;  
objTop = t.offsetTop;  
objParent = t.offsetParent;  
// 如果上级元素不是BODY,则继续累计计算相对偏差  
while( objParent.tagName.toUpperCase() != "BODY" ) {  
  objLeft += objParent.offsetLeft;  
  objTop += objParent.offsetTop;  
  objParent = objParent.offsetParent;  
}  
// 我们已经拿到了我们要定位的广告元素位置了 

  // 获取页面某个元素对象
  // 我这里使用了id属性，你也可以用其它的方法获得元素对象
  var t = document.getElementById("Anthem_Post.ascx_PostComment_CommentUpdatePanel__");

  // 获得左侧，顶部和上级对象
  objLeft = t.offsetLeft;
  objTop = t.offsetTop;
  objParent = t.offsetParent;
  // 如果上级元素不是BODY,则继续累计计算相对偏差
  while( objParent.tagName.toUpperCase() != "BODY" ) {
    objLeft += objParent.offsetLeft;
    objTop += objParent.offsetTop;
    objParent = objParent.offsetParent;
  }
  // 我们已经拿到了我们要定位的广告元素位置了



2 我们的广告
查看复制到剪切板打印
<div id="GOOGLE_COMMENT" style="position:absolute;display:none">  
<script type="text/javascript"><!--  
google_ad_client = "pub-2908059660288034";  
/* 300x250, 创建于 08-9-16 */ 
google_ad_slot = "0023597101";  
google_ad_width = 300;  
google_ad_height = 250;  
//-->  
</script>  
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
</script>  
</div> 

<div id="GOOGLE_COMMENT" style="position:absolute;display:none">
<script type="text/javascript"><!--
google_ad_client = "pub-2908059660288034";
/* 300x250, 创建于 08-9-16 */
google_ad_slot = "0023597101";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
里面注意我使用了GOOGLE_COMMENT作为这个广告的ID,同时设置了CSS属性为绝对定位，不显示。

3 移动我们的广告到正确的位置
查看复制到剪切板打印
// 得到我们前面的广告对象  
var gg = document.getElementById("GOOGLE_COMMENT");  
// 相对于我们要放广告的位置，加上一个偏移量  
gg.style.left=(objLeft +450)+"px";  
gg.style.top = (objTop+10)+"px";  
// 显示广告  
gg.style.display=""; 

  // 得到我们前面的广告对象
  var gg = document.getElementById("GOOGLE_COMMENT");
  // 相对于我们要放广告的位置，加上一个偏移量
  gg.style.left=(objLeft +450)+"px";
  gg.style.top = (objTop+10)+"px";
  // 显示广告
  gg.style.display="";

4 在页面装载完毕后再显示广告
因为我们的代码在整个页面的前部，所以不能一开始就运行，否则根本找不到一些在后面才出现的元素。
我们把自己的代码放在一个function里面
查看复制到剪切板打印
function GOOGLEResize(){  
  // 我们全部的初始化代码  
}  
// 当页面装载完毕后，再运行我们的程序  
window.onload=GOOGLEResize; 

function GOOGLEResize(){
  // 我们全部的初始化代码
}
// 当页面装载完毕后，再运行我们的程序
window.onload=GOOGLEResize;

5 处理页面的resize事件
在IE里，可以简单的用
查看复制到剪切板打印
window.onresize=GOOGLEResize; 

window.onresize=GOOGLEResize;
但是在Firefox里面，则必须用定时器进行定期检测才行
查看复制到剪切板打印
var startWidth = document.getElementsByTagName("body")[0].offsetWidth;  
function checkFFresize() {  
  var resizeWidth = document.getElementsByTagName("body")[0].offsetWidth;  
  if (resizeWidth == startWidth) {  
  } else {  
    startWidth=document.getElementsByTagName("body")[0].offsetWidth;  
    GOOGLEResize();  
  }  
  setTimeout("checkFFresize();",2000);  
}  
if (document.all) {  
} else {  
  setTimeout("checkFFresize();",1000);  
} 

var startWidth = document.getElementsByTagName("body")[0].offsetWidth;
function checkFFresize() {
  var resizeWidth = document.getElementsByTagName("body")[0].offsetWidth;
  if (resizeWidth == startWidth) {
  } else {
    startWidth=document.getElementsByTagName("body")[0].offsetWidth;
    GOOGLEResize();
  }
  setTimeout("checkFFresize();",2000);
}
if (document.all) {
} else {
  setTimeout("checkFFresize();",1000);
}

6 处理页面的异常
屏蔽掉可能出现的异常
查看复制到剪切板打印
function killErrors() {  
return true;  
}  
window.onerror = killErrors;  

function killErrors() {
return true;
}
window.onerror = killErrors;

至此，我所需要的代码已经全部完成了。

三、我的广告的完整代码
查看复制到剪切板打印
<script type="text/javascript">  
function killErrors() {  
return true;  
}  
window.onerror = killErrors;   
 
var init = false;  
function GOOGLEResize(){  
  var subject = document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp");  
  if(!init){  
    subject.innerHTML = subject.innerHTML+"<br/><br/><br/><br/><br/><br/><hr/><br/>";  
    init = true;  
  }  
  var t = document.getElementById("Anthem_Post.ascx_PostComment_CommentUpdatePanel__");  
  var gg = document.getElementById("GOOGLE_COMMENT");  
 
  objLeft = t.offsetLeft;  
  objTop = t.offsetTop;  
  objParent = t.offsetParent;  
  while( objParent.tagName.toUpperCase() != "BODY" )  
  {  
    objLeft += objParent.offsetLeft;  
    objTop += objParent.offsetTop;  
    objParent = objParent.offsetParent;  
  }  
 
  gg.style.left=(objLeft +450)+"px";  
  gg.style.top = (objTop+10)+"px";  
  gg.style.display="";  
 
 
  objLeft = subject .offsetLeft;  
  objTop = subject .offsetTop;  
  objParent = subject .offsetParent;  
  while( objParent.tagName.toUpperCase() != "BODY" )  
  {  
    objLeft += objParent.offsetLeft;  
    objTop += objParent.offsetTop;  
    objParent = objParent.offsetParent;  
  }  
 
  var gg728=document.getElementById("GOOGLE_TOP");  
  gg728.style.left = objLeft+"px";  
  gg728.style.top = (objTop+50)+"px";  
  gg728.style.display="";  
}  
 
window.onresize=GOOGLEResize;  
window.onload=GOOGLEResize;  
var startWidth = document.getElementsByTagName("body")[0].offsetWidth;  
function checkFFresize() {  
  var resizeWidth = document.getElementsByTagName("body")[0].offsetWidth;  
  if (resizeWidth == startWidth) {  
  } else {  
    startWidth=document.getElementsByTagName("body")[0].offsetWidth;  
    GOOGLEResize();  
  }  
  setTimeout("checkFFresize();",2000);  
}  
if (document.all) {  
} else {  
  setTimeout("checkFFresize();",1000);  
}  
</script>  
 
<script type="text/javascript"><!--  
google_ad_client = "pub-2908059660288034";  
/* CSDN摩天 160x600, 创建于 08-9-17 */ 
google_ad_slot = "5598761730";  
google_ad_width = 160;  
google_ad_height = 600;  
//-->  
</script>  
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
</script>  
 
<div id="GOOGLE_TOP" style="position:absolute; top:248px;left:250px;width:728;height:90;display:none"><script type="text/javascript"><!--  
google_ad_client = "pub-2908059660288034";  
/* CSDN横幅 728x90, 创建于 08-9-17 */ 
google_ad_slot = "9488011826";  
google_ad_width = 728;  
google_ad_height = 90;  
//-->  
</script>  
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
</script></div>  
 
<div id="GOOGLE_COMMENT" style="position:absolute;display:none">  
<script type="text/javascript"><!--  
google_ad_client = "pub-2908059660288034";  
/* 300x250, 创建于 08-9-16 */ 
google_ad_slot = "0023597101";  
google_ad_width = 300;  
google_ad_height = 250;  
//-->  
</script>  
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">  
</script>  
</div> 

<script type="text/javascript">
function killErrors() {
return true;
}
window.onerror = killErrors;

var init = false;
function GOOGLEResize(){
  var subject = document.getElementById("Post.ascx_ViewPost_PreviousAndNextEntriesUp");
  if(!init){
    subject.innerHTML = subject.innerHTML+"<br/><br/><br/><br/><br/><br/><hr/><br/>";
    init = true;
  }
  var t = document.getElementById("Anthem_Post.ascx_PostComment_CommentUpdatePanel__");
  var gg = document.getElementById("GOOGLE_COMMENT");

  objLeft = t.offsetLeft;
  objTop = t.offsetTop;
  objParent = t.offsetParent;
  while( objParent.tagName.toUpperCase() != "BODY" )
  {
    objLeft += objParent.offsetLeft;
    objTop += objParent.offsetTop;
    objParent = objParent.offsetParent;
  }

  gg.style.left=(objLeft +450)+"px";
  gg.style.top = (objTop+10)+"px";
  gg.style.display="";


  objLeft = subject .offsetLeft;
  objTop = subject .offsetTop;
  objParent = subject .offsetParent;
  while( objParent.tagName.toUpperCase() != "BODY" )
  {
    objLeft += objParent.offsetLeft;
    objTop += objParent.offsetTop;
    objParent = objParent.offsetParent;
  }

  var gg728=document.getElementById("GOOGLE_TOP");
  gg728.style.left = objLeft+"px";
  gg728.style.top = (objTop+50)+"px";
  gg728.style.display="";
}

window.onresize=GOOGLEResize;
window.onload=GOOGLEResize;
var startWidth = document.getElementsByTagName("body")[0].offsetWidth;
function checkFFresize() {
  var resizeWidth = document.getElementsByTagName("body")[0].offsetWidth;
  if (resizeWidth == startWidth) {
  } else {
    startWidth=document.getElementsByTagName("body")[0].offsetWidth;
    GOOGLEResize();
  }
  setTimeout("checkFFresize();",2000);
}
if (document.all) {
} else {
  setTimeout("checkFFresize();",1000);
}
</script>

<script type="text/javascript"><!--
google_ad_client = "pub-2908059660288034";
/* CSDN摩天 160x600, 创建于 08-9-17 */
google_ad_slot = "5598761730";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<div id="GOOGLE_TOP" style="position:absolute; top:248px;left:250px;width:728;height:90;display:none"><script type="text/javascript"><!--
google_ad_client = "pub-2908059660288034";
/* CSDN横幅 728x90, 创建于 08-9-17 */
google_ad_slot = "9488011826";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>

<div id="GOOGLE_COMMENT" style="position:absolute;display:none">
<script type="text/javascript"><!--
google_ad_client = "pub-2908059660288034";
/* 300x250, 创建于 08-9-16 */
google_ad_slot = "0023597101";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

希望大家用的开心。
分享到：
| 候捷谈Java反射机制
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSDN 博客导出工具, 用于将 CSDN 博客导出为 Markdown / PDF 格式

    CSDN 博客导出工具, 用于将 CSDN 博客导出为 Markdown / PDF 格式

    CSDN博客导出工具

    一款C#编写CSDN博客导出工具，导出为MarkDown文档 炒鸡简单~~~~~~~~~~~~ 一款C#编写CSDN博客导出工具，导出为MarkDown文档 炒鸡简单~~~~~~~~~~~~

    CSDN博客提取器修正版

    程序通过分析CSDN博客源码来生成一些必要的数据，可能在以后使用当中出现爬取不了的情况，可能是CSDN的源码结构修改了。程序只是用于学习之用，严禁用于非法目的而照成CSDN服务器过载。 由于生成PDF的时候需要依赖...

    去除页面广告+去除CSDN推荐内容

    下载资源后解压。有两个文件，一个是用来去除页面广告的，一个是用来去除CSDN博客中右侧的推荐内容。 使用方法摆渡摆渡或者看这个资源的来源博客即可。不会用或用不了的再找我吧。

    CSDN博客导出工具v4.1.zip

    本工具几乎支持国内所有知名博客的导出功能。 支持3种导出方式：个人博客、博客专栏、指定URL。 支持5种导出格式：CHM、PDF、HTML、TXT、EPUB。

    CSDN博客导出工具v4.1

    本工具几乎支持国内所有知名博客的导出功能。 支持3种导出方式：个人博客、博客专栏、指定URL。 支持5种导出格式：CHM、PDF、HTML、TXT、EPUB。 更多：http://blog.csdn.net/sq_zhuyi/article/details/7924776

    鄙人自制csdn博客爬虫

    开发环境 eclipse for jee+jdk7+tomcat7 lucene4.4+crawler4j3.5 索引文件位置：/csdn-blog-crawler/data 记得把生成的索引放入：/csdn-blog-crawler/WebContent

    抓取CSDN博客文章的简单爬虫python源码

    抓取CSDN博客文章的简单爬虫python源码

    CSDN博客下载器v2.2

    好消息：CSDN博客下载器v2.0版本增加导出PDF文件功能，方便查看图片与文章。 在无网络环境，也可以看自己的一些文章。当然如果您发现CSDN博客的一些文章值得收藏，你也可以使用本软件轻松的下载到您的电脑。 该版本...

    CSDN博客导出工具v4.2

    (该版本新增百度和QQ空间的日志导出功能) ... 支持3种导出方式：个人博客、博客专栏、指定URL。 支持5种导出格式：CHM、PDF、HTML、TXT、EPUB。 更多：http://blog.csdn.net/sq_zhuyi/article/details/7924776

    CSDN博客下载器v2.4

    上周发布了2.2版本，各位网友仍然提出了很多新功能与用户交互人性化的建议，在此很感谢大家的支持。2.4版本只修复了个别...2.解决获取不全博客中的图片。 3.博客信息窗口可以手动拉伸变宽。 4.增加博客信息排序功能。

    Android小巫CSDN博客客户端源码

    小巫CSDN博客客户端源码，配套博文可以到http://blog.csdn.net/wwj_748/article/details/39134151进行参考

    CSDN博客导出工具v4.1-源码

    本工具几乎支持国内所有知名博客的导出功能。 支持3种导出方式：个人博客、博客专栏、指定URL。 支持5种导出格式：CHM、PDF、HTML、TXT、EPUB。

    CSDN博客导出工具 Mac By Swift

    写这个的目的主要是用于了解Swift语言本身，以及如何与...需要先使用CSDN账号来登录，可以导出所有的博客文章，添加YAML头信息的时候，会在头信息里面包含文章对应的标签和分类，以及对应的文章类型（原创、转载、翻译)

    (38条消息) 【一起啃西瓜书】机器学习-期末复习（不挂科）_ZSYL的博客-CSDN博客.lnk

    (38条消息) 【一起啃西瓜书】机器学习-期末复习（不挂科）_ZSYL的博客-CSDN博客.lnk

    csdn博客代码高亮显示源码

    类似与csdn博客里面的代码高亮显示支持 它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / ...

    CSDN博客导出工具v3.2

    支持3种导出方式：个人博客、博客专栏、指定URL。 支持5种导出格式：CHM、PDF、HTML、TXT、EPUB。 更多：http://blog.csdn.net/sq_zhuyi/article/details/7924776

    基于STM32的半导体制冷片(TEC)温度控制系统设计_大白兔的博客-CSDN博客_tec恒温.pdf

    基于STM32的半导体制冷片(TEC)温度控制系统设计_大白兔的博客-CSDN博客_tec恒温.pdf

    CSDN博客客户端

    阅读博客和资讯,搜索博客...可以快捷方便查看 CSDN 最新IT资讯,最新和热门博客文章,集查看,搜索,阅读, 分享,评论于一身, 您可以将喜欢的文章加入收藏夹随时离线阅读,你还可以对收藏夹文章进行添加备注,快速查找等操作.

Magicbox
Global site tag (gtag.js) - Google Analytics