终端大师

品牌服装零售终端经营管理博客

« 晚上没有空更新了!网游五大主流PK模式你喜欢哪种? »

如何实现文章中“广告被文字环绕”的效果!

往自己的网站上添加广告,这个应该是每一位矿工必然会做到的事情,至少近期应该是的,不否定,也许过段时间会有新的盈利形式出现.

        广告的格式多种多样,大大小小,添加的位置也不同,有在首页的横幅,在网页两侧的竖型条,还有在文章中的方块状广告.今天我要写的就是添加博客文章中的方块状广告.

其实在文章中添加广告的方法有很多,

我曾今用过的一种最最简单,最最适合懒人的方法:

        就是在写完文章之后,进入到源代码模式,然后,把你的广告代码复制在文章的某个"</p>"后面 ,也就是一个回车标记的后面.然后保存,OK!广告

就在文章中了.但是效果不好,出来的效果就跟你网一段文字里面加入一张图片一样,换行显示,而且不会跟文字同行.这样一个方块广告夹在两端文

字中间,给人的感觉好突兀,好特意.而且也影响了读者的阅读,以及整个网页的结构.最麻烦的就是,你如果想要每篇文章都显示这个广告代码,就在每一篇文章里都加!够麻烦吧.....当然,如果你是个大懒人,实在懒得去研究那些麻烦的代码啊..CSS啊...那就用这种方法吧!

好了,有点进取心的站长们,还是让我们研究合理正确的道路吧:

         首先申明,这是经验帖,不是教育帖.痞子自己也只是个半瓶水.也是一边研究,一边学习的.

         那么,先公布下思路,既然要在每篇文章的显示页里添加这段广告,那么就是从文章显示页的代码里修改着手了.只要将广告代码添加到文章显示页的代码中,并用CSS来把它定位在一个正确的合理的位置,我们的目的就达到了.

1.建立广告标签文件:

         在你获得了广告代码之后,我们先在网站程序下的INCLUDE文件下建立一个广告标签文件:guanggao.asp(名字你自己取)

当然你不建这个文件也可以,建了主要是为了方便以后的管理.guanggao.asp文件中的内容就是你的广告代码.

2.将广告标签添加到文章显示代码中:

        在广告标签文件建立好之后,我们就在:网站程序根目录——THMES(模板文件)——你网站正在应用的主题文件夹——TEMPLATE/b_article-single文件中添加这个标签.

以代码形式打开b_article-single,找到以下代码:

<div class="post-body"><#article/content#></div>

这句代码就是显示文章内容的代码,在<div class="post-body"><#article/content#></div>之间插入广告标签代码:

<div id="Content_guanggao" class="guanggao"><#CACHE_INCLUDE_GUANGGAO#></div> 

红字部分是你之前在建立广告标签文件时的命名.

这样之后,广告就已经加到文章中了,并且是每一篇文章都会显示广告了.

3.添加CSS

但是这样的效果跟我之前说的那个直接在文章中添加代码的方法一样,广告还是换行显示.

接下来我们需要给这段广告代码添加CSS来定位.

选中这段代码.选择编辑CSS,新建一个CSS. 

然后在跳出的选择框选择合适的定位数据,边缘,大小等等,不过那个我截图太麻烦,大家也可以直接选择确定,在生产的代码区域内输入我设定好的代码:

<style type="text/css">
<!--
.alimama {
    margin: 2px 2px 2px 2px;
    padding: 10px 0px 0px 10px;
    float:left;
    width: 260px;
    height: 300px;
    vertical-align: top;
    border:1px #000000 solid;

}
-->
</style>

因为在创建CSS的时候,选择了只对改文档,所以这段代码就是位于article_single代码的最上方.红色部分是自动生成的,蓝色部分为你要添加的,分别是各种定位以及大小的属性,大家自己修改观察从而得到自己最喜欢的效果.

float:left;决定广告是在左边还是右边.

 width: 260px;   height: 300px;广告显示区域的大小,根据你自己的挂广告来,一般要打个10PX,好看一点.

这样在文章中添加广告,并达到文字环绕广告的效果就完成了.

痞子是现学现卖,写的不对的地方,还希望各位指出来.及时改正.并让更多刚开始做站的朋友们可以学到一些东西.

自己研究的乐趣是无穷的.今天又学到了一点哈哈.


原创文章如转载,请注明:转载自:终端大师[http://www.webminer.com.cn/]
本文链接地址:http://www.webminer.com.cn/post/15.html

 

 

收藏到网摘:

 

 

  • GG代码 发表于  2008-1-21 15:36:22
  • 不错,顶啊,我看了,我去试度,回来再来谢你!哈哈!
  • 还是不行啊 发表于  2008-1-21 16:16:45
  • 按照你的方法还是不成功,没有显示广告,我的QQ:490068643,加我一下,我请教你一下!谢谢了@!
  • 大帝007 发表于  2008-1-27 23:10:23
  • 恩,只是那个黑色框框俺的也有,还没弄好怎么去掉!
  • 互联网痞子 发表于  2008-1-27 23:33:17
  • 这个应该DIV的css边框里面去设置的吧?
  • qwe 发表于  2008-7-29 11:08:27
  • hey,find wow gold click here
  • WOWGOLD 发表于  2008-9-9 16:31:54
  • wow gold store provide cheap wow gold welcome you.

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

订阅到……

feedsky
抓虾
google reader
my yahoo
bloglines

最新评论及回复

最近发表

版权信息