<div style="text-indent: 2em; font-size: larger;">
本文以在ZBlog中加入阿里妈妈的广告位作为示例,来说明如何在ZBlog中加入广告位的方法。加入其他广告位,方法类似。
在获取到广告位代码后,需要将代码部署到网站中去,就是将代码插入到网站代码当中。对于ZBlog,使用了主题管理模式,所以,我们要定位到博客网站当前使用的主题文件夹,比如为 ~/Themes/default/Template/(~ 代表博客网站的根目录),然后,将广告代码插入该文件夹下的以下五个文件中去,即:
- catalog.html - 博客类别页面模板
- default.html - 博客首页模板
- search.html - 博客文章搜索页面模板
- single.html - 博客文章内页模板
- tags.html - 博客标签云集网页模板
以上说要修改5个文件的源代码,隐含了说使广告全站开启,如果你只想广告在首页显示,而其他页面不显示,那么,仅需要修改 default.html 文件就行了。
确定了目标文件,现在要确定广告代码将要插入的目标位置。比如让广告位出现在页面最顶部并靠右显示,那么就可以分别去以上5个文件的顶部层中,进入插入操作。即插入在ID为divTop的层(div)中。在插入之前,先给广告代码一个包装的层,给它一个ID比如说叫divAd,以便在后面更好地控制其显示位置。即插入之后,页面的顶部层看起来是这样的格式:
<div id="divTop"> 原来的代码 <!-- 加入的广告位 --> <div id="divAd"> 这里是从阿里妈妈那里复制过来的广告代码 </div> &lgt;!-- 加入的广告位 结束 --> </div>
比如一个实际的例子是这样的:
<div id="divTop"> <div id="BlogLogo"><a href="<#ZC_BLOG_HOST#>"><img src="<#ZC_BLOG_HOST#>../images/logo_new.gif"</a>&lgt;/div> <h1 id="BlogTitle"><a href="<#ZC_BLOG_HOST#>"><#ZC_BLOG_NAME#></a></h1> <h2 id="BlogSubTitle"><#ZC_BLOG_SUB_NAME#></h2> <!-- 广告 --> <div id="divAd"> <script type="text/javascript"> alimama_pid="mm_10091974_2073071_8620269"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="16"; alimama_width=658; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type="text/javascript"> </script> </div> <!-- 广告结束 --> </div>
如果是开启广告全站显示,那么上述的插入操作要在五个文件中重复。好了后,广告位就已经插入到5个模板文件中了。而且你这时打开首页,已经可以看到广告位了,但是文章内页还没有,因为文章内页是已经建立好的文件。而模板修改之后,需要点击“文件重建”才能更新。所以如果开启广告全站显示之后,你需要点击“文件重建”。你可以这时就点,或者呆会儿再点击。
你打开首页,已经看到了,广告位显示在了导航栏之上,可能比较丑,我们希望它显示在页面的最顶部,并靠右。那么,现在需要定位到 ~/Themes/default/Template/STYLE/ 文件夹下,来修改控制页面显示样式的CSS文件,比如你的主题当前使用的样式是default.css,那么现在打开它,在它的最底下添加如下的代码,就可以控制广告位显示在想要的位置上了。
/********** 广告 ******************/ #divAd { position: absolute; right: 0; top: 0; }
好了,现在大功告成!如果你刚才没有点击“文件重建”,那么可以现在点击它,让广告位全站显示了。