利用CSS层 实现广告画面上出现浮动链接效果

写在文章之前：2012年9月1日起 阿里妈妈包时广告下线，使得大批的中小站长茫然，阿里妈妈包时广告”是一批站长的初恋，每周从5分，几毛，几元。。。逐渐的发展过来，，“阿里妈妈包时广告”下线之后，目前保留的是“按点击计费”和“按成交计费”模式。

　　随之替换的是个什么橱窗推广，其实是让广大的中小站长免费帮阿里妈妈提供展示平台，站长几乎是赚不到什么广告费的！这一点相信中小站长都明白。所以我的网站（yydy.org）自9月1日之后已把阿里妈妈的包时广告代码全部下线了！那么如何选择新的广告代码呢？这里我继续选择DISCUZ联盟作为我的广告位闲时显示代码。那么如何想以前阿里妈妈一样让你的网站用户知道在哪里可以在线购买你的广告位呢？这里我选择了在我的淘宝店发布广告位出售宝贝。

以下内容才是本文的关键内容：

　　大家经常看到百度、谷歌或者阿里妈妈的广告显示的右下角会出现他们对应的链接！指引你的广告客户可以直接点击此链接购买你的广告：如下图的“百度推广”：


　　本站之前的包时广告代码都是通过阿里妈妈投放的，可是现在阿里妈妈停止投放包时广告代码业务了！如何让你的广告位能购现在“购买此广告位”，而又不影响你正在投放的广告页面呢？
　　这里我摸索了半天终于找到了解决的办法，CSS层的用法：
　　假设你在后台已经定义好了一段广告代码，那么只要在这个广告代码的上部加入：

1. <div style= "position:relative"><!--定义最外层div开始-->
   
2. <div style= "position:absolute; z-index:100; right:5px;bottom:2px"><a  target="_blank"><font color=red><b>购买此广告位</b></font></a></div>

复制代码

然后在你的广告代码尾部加上：

1. </div><!--定义最外层div结束-->

复制代码

所以完整的广告代码就是：

1. <div style= "position:relative"><!--定义最外层div开始-->
   
2. <div style= "position:absolute; z-index:100; right:5px;bottom:2px"><a  target="_blank"><font color=red><b>购买此广告位</b></font></a></div>
   
3. <!--你的原始的广告代码开始-->
   
4. ... ...
   
5. <!--你的原始的广告代码结束-->
   
6. </div><!--定义最外层div结束-->

复制代码

最后实现的效果是：（实际页面显示效果可以访问本站 http://yydy.org ，看顶部右侧广告位）


你学会了吗？

如有问题欢迎参与本帖讨论！来贴必回！

这么好的原创贴居然没人理会？

不错，学习了，顶一个。

马子王 发表于 2012-9-14 11:06
不错，学习了，顶一个。

你的效果实现了吗？

yydyyydy 发表于 2012-9-19 13:51
你的效果实现了吗？

非常好，演示：
http://bbs.1ship.cn/

谢谢楼主分享, 大侠指导下如果横排两个或多个广告，怎么弄？

有点看不懂。。

xsxuxu 发表于 2012-10-8 19:56
有点看不懂。。

能说的具体点吗？

yydyyydy 发表于 2012-10-9 13:00
能说的具体点吗？

呵呵，为什么要加“购买此广告位”

xsxuxu 发表于 2012-10-11 20:02
呵呵，为什么要加“购买此广告位”

告诉用户直接购买此广告位的链接啊