织梦如何添加浮动广告？-织梦建站-盈思创科技

使用织梦自带的“广告管理”功能（推荐）

这是最规范、最安全的方法，织梦内置了广告管理系统，可以让你方便地在后台添加和管理广告，并生成调用代码。

（图片来源网络，侵删）

优点：

管理方便：所有广告都在后台统一管理，修改、删除、过期设置都非常方便。
代码规范：生成的调用代码符合织梦规范，不易出错。
功能强大：可以设置广告的过期时间、点击次数限制等。

缺点：

调用方式相对固定,对于需要自定义样式（如固定位置、层级）的广告，需要额外CSS。

操作步骤：

第一步：在后台添加广告

登录您的织梦后台。
在左侧菜单栏中,找到 【核心】 -> 【广告管理】 -> 【广告管理】。
点击右上角的 【增加广告】 按钮。
（图片来源网络，侵删）
在添加广告页面,填写以下信息：
- 广告名称：给广告起一个容易识别的名字，右下角浮动广告”。
- 广告位置：这个可以随便填，因为后面我们会通过代码调用，不是直接在这里调用。
- 广告类型：选择 【图片广告】，如果您的广告是Flash或代码，请选择相应类型。
- ：
  - 如果是图片广告,点击 【上传新文件】，上传您的广告图片。
  - 上传成功后,图片会显示在列表中，点击图片的“选择”按钮，它就会自动填入广告内容框。
- 链接网址：输入广告图片点击后要跳转的URL地址（https://www.example.com），如果不需要点击，可以留空。
- 广告说明：可选，简单描述一下这个广告。
- 限制条件：这里非常重要！
  - 过期时间：设置广告的到期时间，到期后会自动下线。
  - 限制IP：可以设置哪些IP能看到或看不到这个广告。
  - 限制点击：可以限制广告被点击的总次数。
- 广告代码：这一步可以留空，因为我们选择的是图片广告，内容已经在上一步填好了。
点击 【确定】 保存广告。

第二步：获取广告调用代码

回到 【广告管理】 列表页面。
找到您刚刚创建的广告,在最右侧的 【广告代码】 列，点击 【获取代码】。
在弹出的页面中,系统会生成一段调用代码，代码格式通常如下：
```
{dede:myad name='右下角浮动广告'/}
```
这里的 name='右下角浮动广告' 就是你第一步里填写的“广告名称”。

第三步：修改并插入广告代码到模板

打开模板文件：您需要将浮动广告添加到网站的哪个页面，就打开对应的模板文件，想全站都显示，就打开 templets/default/index.htm (首页模板) 或者 templets/default/article_article.htm (文章页模板)，我们会把它放在页面的底部，这样不会影响页面主要内容。
修改代码：直接使用 {dede:myad name='右下角浮动广告'/} 是不够的，它只会显示图片，没有浮动效果，我们需要用 div 把它包裹起来，并添加自定义的CSS类。
```

<div class="float-ad">
    {dede:myad name='右下角浮动广告'/}
</div>
```

添加CSS样式：为了让这个 div 浮动起来，我们需要在模板的CSS文件中添加样式。

找到您的CSS文件,通常位于 templets/default/style/ 目录下，文件名可能是 dedecms.css, main.css 等。
在CSS文件中添加以下代码：

/* 右下角浮动广告样式 */
.float-ad {
    position: fixed;    /* 固定定位 */
    right: 20px;       /* 距离右边20px */
    bottom: 20px;      /* 距离底部20px */
    z-index: 9999;     /* 确保广告在最上层，不被其他元素遮挡 */
}
/* 如果广告图片需要点击，可以给图片加个样式，比如去掉默认边框 */
.float-ad img {
    border: 0;
    cursor: pointer;
}

保存并刷新：保存模板文件和CSS文件，然后刷新您的网站首页，就能看到右下角出现了浮动广告。

直接修改模板文件（适合简单广告）

如果你的广告代码非常简单,或者只是临时放一个广告，可以直接在模板文件里写死代码。

优点：

速度快,直接操作，无需后台管理。
对于静态代码（如纯HTML、JS）的集成非常方便。

缺点：

不推荐：如果需要更换广告，必须修改文件，非常麻烦。
无法利用织梦的广告管理功能（如过期、限制等）。

操作步骤：

打开模板文件：同方法一，打开您需要添加广告的模板文件，如 index.htm。

在 </body> 标签前插入代码：

<!-- 在 </body> 标签之前添加 -->
<div class="float-ad-direct">
    <a href="https://www.example.com" target="_blank">
        <img src="/images/your-ad-image.jpg" alt="广告" />
    </a>
    <!-- 如果是JS代码，就直接粘贴在这里 -->
    <!-- <script src="..."></script> -->
</div>

添加CSS样式：同方法一，在CSS文件中添加对应的样式。

/* 直接插入的浮动广告样式 */
.float-ad-direct {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
}
.float-ad-direct img {
    border: 0;
    cursor: pointer;
}

保存并刷新：保存文件，刷新网站即可看到效果。

常见问题与注意事项

广告被遮挡，点击无效？
- 原因：网站的顶部导航栏、页脚或其他元素 z-index 值设置得过高，覆盖了广告。
- 解决：在CSS中，给浮动广告的 div 设置一个足够大的 z-index 值，z-index: 9999;，通常9999已经足够。

广告在手机端显示异常？

原因：position: fixed; 在移动端可能会有兼容性问题，或者广告尺寸太大。

解决：可以添加媒体查询，为移动端设置不同的样式。

@media screen and (max-width: 768px) {
.float-ad {
    right: 10px;
    bottom: 10px;
    /* 可以调整广告图片的宽度 */
    width: 150px;
}
.float-ad img {
    width: 100%;
    height: auto;
}
}

如何添加关闭按钮？ 很多用户希望广告可以被关闭，你可以通过CSS和JavaScript实现。

修改HTML：在广告 div 内部添加一个关闭按钮。

<div class="float-ad" id="myFloatAd">
    {dede:myad name='右下角浮动广告'/}
    <span class="ad-close-btn">×</span>
</div>

修改CSS：给关闭按钮添加样式。

.ad-close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    font-size: 16px;
}

添加JavaScript：在模板文件中添加一小段JS代码（可以放在</body>标签前）。

<script>
document.addEventListener('DOMContentLoaded', function() {
    var closeBtn = document.querySelector('.ad-close-btn');
    var floatAd = document.getElementById('myFloatAd');
    if (closeBtn && floatAd) {
        closeBtn.onclick = function() {
            floatAd.style.display = 'none';
        }
    }
});
</script>

对于绝大多数情况,强烈推荐使用方法一（织梦自带的广告管理），它更规范、更易于维护，是织梦CMS的标准用法，方法二可以作为临时应急方案，但不建议长期使用。

希望这份详细的教程能帮助您成功在织梦网站上添加浮动广告！

织梦如何添加浮动广告？

使用织梦自带的“广告管理”功能（推荐）

优点：

缺点：

操作步骤：

直接修改模板文件（适合简单广告）

优点：

缺点：

操作步骤：

常见问题与注意事项

相关文章

目录[+]