Responsive Ad Label um adsense

Question

Ich versuche, meine Website auf der Whitelist für AdBlock zu haben. Um dies zu tun, muss ich meine gesamte Werbung mit einem Etikett versehen. Ich konnte das Label hinzufügen, es reagiert jedoch nicht und manchmal überlappt sich die Anzeige. Darf ich fragen, was ist ein besserer Weg, ein Label rund um Adsense-Werbung zu erstellen.

<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

hinzufügen mit Ihrem span ändern zu platzieren versuchen class="Ad-label" in der Anzeigenzeile wie folgt:

<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> 

Und als diese Art gelten:

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

Answer 2

Semantisch, sollte das Etikett eine Überschrift in der Sektion sein, um den Abschnitt als Werbung (read this) zu identifizieren.

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

aber sagen, dass, wenn Sie das Etikett auf der rechten Rand der Anzeige dann diese beiden Linien

position: absolute; 
left: 13%; 

zu

position: relative; 
left: 100%; 

Answer 3

prüfen diese Lösung. Jetzt reagiert das Label auf jede Größe der Werbung. Sie können dies überprüfen, wenn Ihr Problem behoben wird. Ich habe das Etikett in den Abschnitt für besseren und semantischen Code verschoben. Da Ihre Anzeige jetzt nicht sichtbar ist, habe ich benutzerdefinierte Höhe über CSS hinzugefügt. Bitte entfernen Sie das Gleiche, während Sie diesen Code mit der tatsächlichen Anzeige verwenden. Überprüfen Sie diese https://jsfiddle.net/b2jL5z5w/ für die Vorschau.

<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; 
} 
/*--*/