前期准备

1.商务对接
2.在百青藤广告管理后台创建相应的两个广告位

获取代码

百青藤广告获取代码

  • 网站合作 -> 业务管理 -> 网盟推广 -> 推广位代码 -> 推广位列表 -> 获取代码 -> 异步

百青藤广告代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- 左边广告位
<script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u5813159",
            container: s
        });
    })();
</script>
<!-- 多条广告如下脚本只需引入一次 -->
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" ></script>

- 右边广告位
<script type="text/javascript">
    (function() {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div style="" id="' + s + '"></div>');
        (window.slotbydup = window.slotbydup || []).push({
            id: "u5813162",
            container: s
        });
    })();
</script>
<!-- 多条广告如下脚本只需引入一次 -->
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer" ></script>
代码合并

根据需求将生成的两个广告位置（左&右）组合成大通栏样式

合并代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div style="width:1200px;overflow: hidden;">
    <div style="display: inline-block;" id="ssp_5813159"></div>
    <div style="display: inline-block;" id="ssp_5813162"></div>
    <script type="text/javascript">
        (function () {
            (window.slotbydup = window.slotbydup || []).push({
                id: "u5813159",
                container: "ssp_5813159",
                async: true
            });
        })();
        (function () {
            (window.slotbydup = window.slotbydup || []).push({
                id: "u5813162",
                container: "ssp_5813162",
                async: true
            });
        })();
    </script>
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/c.js" async="async" defer="defer"></script>
</div>
注意事项

1.每次只需替换id即可
2.注意广告左右位置对应