Question

我试图将我的网站放在AdBlock的白名单上。为了做到这一点，我需要用标签封装我的所有广告。我能够添加标签，但它没有响应，有时广告会重叠。我可以问一下围绕adsense广告创建标签的更好方法。

<div style="position: relative;">
    <span class="Ad-label">Advertisement</span>
    <section>
        <div class="row">
            <div class="row-sm-height">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>

.Ad-label {
    color: #444;
    background: #ddd;
    font-family: arial;
    padding: 3px 10px;
    font-size: 10px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    left: 13%;
    top: 0px;
    white-space: nowrap;
    font-size: 11px;
    display: inline-block;
}

[1]

Answer 1

在广告行中添加span class="Ad-label"，如下所示：

<div style="position: relative;">
    <section>
        <div class="row">
            <div class="row-sm-height">
            <span class="Ad-label">Advertisement</span>
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>

然后应用这种风格：

.Ad-label
{
    text-align: left;
    padding: 3px 0px;
    position: relative;
    top: 0px;
    font-size: 10px;
    width: 100%;
    float: left;
}

Answer 2

检查此解决方案。现在标签响应任何大小的广告。如果问题得到解决，您可以使用此方法进行检查。我已经将标签移到了部分内部以获得更好的语义代码。由于您的广告现在不可见，我通过CSS添加了自定义高度。将此代码与实际广告一起使用时，请将其移除。请检查此https://jsfiddle.net/b2jL5z5w/进行预览。

<div class="ad-box">
    <section>
        <div class="Ad-label">Advertisement</div>
        <div class="row">
            <div class="row-sm-height">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- Responsive Banner Ad -->
                <ins class="adsbygoogle"
                     style="display: block"
                     data-ad-client="ca-pub-2315506723267173"
                     data-ad-slot="5172135644"
                     data-ad-format="auto">
                </ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
    </section>
</div>

.ad-box{
    position:relative;
    background:#ccc; /*-please remove this while final output.-*/
}
.Ad-label {
    color: #444;
    background: #ddd;
    font-family: arial;
    padding: 3px 10px;
    margin:0;
    font-size: 10px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
    position: absolute;
    right: -86px;
    top: 0;
}

/*-this is temporary for height. please remove this while final output.-*/
.row-sm-height{
    height:150px; 
}
/*--*/

adsense周围的响应广告标签

2 个答案: