adsense周圍的響應式廣告標籤

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

與添加您spanclass="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

在語義上，該標籤應該是段中的標題，以便標識該部分作爲廣告(read this)。

<div style="position: relative;"> 
    <section> 
    <h1 class="Ad-label">Advertisement</h1> 

話雖這麼說，如果你想將標籤貼在廣告的右側邊緣，然後更改這兩個行

position: absolute; 
left: 13%; 

到

position: relative; 
left: 100%; 

Answer 3

檢查這個解決方案。現在，該標籤可以響應任何尺寸的廣告。如果您的問題得到解決，您可以使用此檢查。爲了更好的語義代碼，我已經將部分標籤移動了。 由於您的廣告現在不可見，因此我通過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; 
} 
/*--*/