和讯博客广告位置改变

来源:互联网 发布:浙江哪里适合做淘宝 编辑:程序博客网 时间:2024/05/01 05:44

 一、收到朋友求助信息(需求了解):

                    --------------------------------------------------
                    消息对象:付杰<*******@126.com>
                    --------------------------------------------------
                    2008-03-06 08:49:16 付杰
                    在没有.
                    
                    2008-03-06 08:51:11 红猎人/yl
                    在的啊,好久不见你了
                      
                    
                    2008-03-06 08:51:58 付杰
                    是啊...
                    
                    
                    好久不见....要请你帮个忙咯.
                    
                    2008-03-06 08:56:13 红猎人/yl
                    你说说看,我能不能帮上
                      
                    
                    2008-03-06 08:56:50 付杰
                    代码问题...你现在应该厉害了吧...

朋友说他的和讯博客上只有一个广告位,但他想放两个广告,而且一个想放在顶部,一个放在左边.问我有没有办法.我没用过和讯博客,不能先答应,先去看看再说,


二、过程实录

第一步:打开他的博客网页看了看:是这个样子的

 

确定自己可以自定义CSS代码的.

备份好了所有源代码,开始动刀子了!

第二步:找到相应模块,本来想看看广告位置在哪个div块中,然后调整一下位置就可以了,于是查看网页源代码和CSS源码,但源文件很乱不好找。
第三步:决定保存网页到本地进行修改。
用DM打开,找到了相应的DIV,大致改了一下位置,可以移动,有效果。不错!
得上课了,一会回来接着弄……

遇到一个问题:这个博客只能自定义一个模块,而朋友想在两个地方显示广告,这就不能用移动模块的方法来实现了,只有想想别的办法了.

有了,我在他的插入代码里用把两个广告代码分别用两个div来标志,这样可以一个保持不动,另一个定位到顶部.但不知道这个博客支持不支持.先看看再说.

失败了,这样让网页的布局全乱了.

参考一下另一个人的代码再说.

转了一圈又回到了起点,原来第一个解决办法是可行的,因为我把<div id="ad01"> 写成了 <div="ad01>才出了错,哎,人一粗心就会出错。呵呵。。。

现在接着上面的思路来弄。

先在真实的网站中添加上横幅广告代码,将它放在 id 为 ad02 的div 中,(其实原来的代码不用放在新div中都可以的)

现在把ad02定位到面部

首先在自定义CSS中加入ad02这个id样式。

#ad01 {
    height: 92px;
    width: 730px;
    position: relative;
    top: -220px;
    left: 173px;
    border-style:double;
    border-width:1px;
    border-color:#FFFFFF;
}

由于粗心,没有把ad01改为ad02,所以得把横幅和竖幅的位置弄反了。再来!!

#ad02 {
    height: 92px;
    width: 730px;
    position: relative;
    top: -220px;
    left: 173px;
    border-style:double;
    border-width:1px;
    border-color:#FFFFFF;
}

但是发现横幅跑到页面中间去了,不行,而且博客模板变了。
因为先前是拿ad01做试验,所以在移动ad02是要考虑ad01的高度。改代码为:

#ad02 {
    height: 92px;
    width: 730px;
    position: relative;
    top: -1070px;
    left: 173px;
    border-style:double;
    border-width:1px;
    border-color:#FFFFFF;
}

可以了,又做了一些细部调整。

为了给他给的广告代码背景兼容,我去掉了边框。
#ad02 {
    height: 92px;
    width: 730px;
    position: relative;
    top: -1070px;
    left: 173px;
}

OK ! GAME OVER!

成果展示:


总结:要细心。

哎。。。又不能睡午觉了,可是有什么办法呢,谁叫我是为朋友两肋插刀的人呢!呵呵。。。。

原创粉丝点击