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

最新推荐文章于 2022-03-14 09:17:49 发布

莳心

最新推荐文章于 2022-03-14 09:17:49 发布

阅读量706

点赞数

文章标签： Google .net IE Firefox CSS

本文链接：https://blog.csdn.net/shz2008bj/article/details/83289076

版权

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">
</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">
</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.οnlοad=GOOGLEResize;

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

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

window.οnresize=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.οnresize=GOOGLEResize;
window.οnlοad=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">
</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">
</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">
</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.οnresize=GOOGLEResize;
window.οnlοad=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">
</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">
</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">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

希望大家用的开心。