中国博客联盟

博客广告定位演示图片

估计大家的博客运行一段时间之后，应该都有不小的收获了，有排名的长排名、有人品的长人品、有流量的长流量，大家是不是准备用你的小博赚点域名空间费用呢？本文菠萝就手把手教你如何定位你的广告位置，其他位置的定位比较简单，就不多讲了，本文只讲博客内容页面的广告定位。

今天菠萝筐添加了百度的精准广告，我是定位在内容页面的右上方，被文字环绕包围的效果（前往围观，顺便点下广告 ），研究广告的朋友都知道这个位置是最佳的广告位置，下面就以这个位置的300x250广告为例进行详细讲解。

一、原理分析：

菠萝是利用Wordpress默认的主题Twentyten主题里的带标题图片的定位代码来对广告进行定位的，比如在WP默认主题中可以对图片进行左、右、居中对齐定位，如果图片设置了说明（Caption），说明文字也会显示在这个图片的下面。看右上角演示。我们就用广告代码替换图片所在的位置来完美实现广告位置的定位。

二、定位过程：

1、我们需要把WP默认主题的图片定位样式CSS代码复制到你的主题样式表文件中，代码如下：

/* =Images -------------------------------------------------------------- */

#content img {
margin: 0;
height: auto;
max-width: 640px;
width: auto;
}
#content .attachment img {
max-width: 900px;
}
#content .alignleft,
#content img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
#content .alignright,
#content img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
#content .aligncenter,
#content img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
margin-bottom: 12px;
}
#content .wp-caption {
background: #f1f1f1;
line-height: 18px;
margin-bottom: 20px;
padding: 4px;
text-align: center;
}
#content .wp-caption img {
margin: 5px 5px 0;
}
#content .wp-caption p.wp-caption-text {
color: #888;
font-size: 12px;
margin: 5px;
}
#content .wp-smiley {
margin: 0;
}
#content .gallery {
margin: 0 auto 18px;
}
#content .gallery .gallery-item {
float: left;
margin-top: 0;
text-align: center;
width: 33%;
}
#content .gallery img {
border: 2px solid #cfcfcf;
}
#content .gallery .gallery-caption {
color: #888;
font-size: 12px;
margin: 0 0 12px;
}
#content .gallery dl {
margin: 0;
}
#content .gallery img {
border: 10px solid #f1f1f1;
}
#content .gallery br+br {
display: none;
}
#content .attachment img { /* single attachment images should be centered */
display: block;
margin: 0 auto;
}

上面的是默认主题内容页面所有图片的样式代码，如果我们只把广告代码定位到右上角，那我们只需要其中的这些代码就足够了：

#content .alignright,
#content img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}

#content img.alignright,
#content img.aligncenter {
margin-bottom: 12px;
}
#content .wp-caption {
background: #f1f1f1;
line-height: 18px;
margin-bottom: 20px;
padding: 4px;
text-align: center;
}
#content .wp-caption img {
margin: 5px 5px 0;
}
#content .wp-caption p.wp-caption-text {
color: #888;
font-size: 12px;
margin: 5px;
}

把以上代码复制到你的样式表文件中，一般都是主题目录下的style.css文件。

2、制作广告展示代码：

启用WP默认主题后，你可以插入一个居右的图片，并带上图片说明，之后浏览日志就可以看到和本文右上角一样的图片样式，之后查看源码，找到这个图片的定位代码，完整的代码应该是：

<div id="attachment_652" class="wp-caption alignright" style="width: 190px;"><img original="http://www.chinablogs.org/files/2010/12/blook.jpg" class="size-full wp-image-652" title="博客广告定位演示图片" src="http://www.chinablogs.org/files/2010/12/blook.jpg" alt="" height="180" width="180"><p class="wp-caption-text">博客广告定位演示图片</p></div>

之后你就可以利用上面的代码进行改装，我投放的是300x250大小的广告，边框默认是10px，那整个广告位置的宽度应该是320px，那上面的代码就应该改为：

<div id="attachment_652" class="wp-caption alignright" style="width: 320px;">这里放你自己的广告代码<p class="wp-caption-text">这里修改为你的相关文字说明</p></div>

至此，把上面的代码复制到你的single日志内容标签之前，这是我的广告代码，广告内容是百度的广告JS调用，

<div id="attachment" style="width:320px;">
<script type="text/javascript">BAIDU_CLB_singleFillSlot("96341");</script>
<p>菠萝推荐</p>
</div>
<?php the_content();?>

注意广告代码放在<?php the_content();?>之前，而不是之后，不再多解释，道理很简单。

至此，整个广告代码的定位就完美实现。如遇到问题，欢迎一起交流。