Responsense Ad Label adsense

Question

Sitemi AdBlock için beyaz listeye almaya çalışıyorum. Bunu yapmak için tüm reklamlarımı bir etiketle kapamalıyım. Etiketi ekleyebildim ancak yanıt vermiyor ve bazen reklam çakışıyor. Adsense reklamı hakkında bir etiket oluşturmanın daha iyi bir yolunu sorabilir miyim.

<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

değiştirmek ile span ekleyin, söyleniyor Reklam satırında class="Ad-label" bu şekilde:

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

Ve bu stil uygulamak daha:

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

Answer 2

Semantik, etiket bir reklam (read this) olarak bölümünü tanımlamak için bölümün içinde bir başlık olmalıdır.

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

Yani reklamın sağ kenarına etiketi yerleştirmek için çalışıyorsanız o zaman bu iki satır

position: absolute; 
left: 13%; 

position: relative; 
left: 100%; 

Answer 3

kontrol bu çözüm. Şimdi etiket, herhangi bir reklam boyutuna cevap veriyor. Sorununuz çözülecekse, bunu kullanarak kontrol edebilirsiniz. Etiketi daha iyi ve semantik kod için içeriye taşıdım. Reklamınız artık görünür olmadığından, CSS ile özel yükseklik ekledim. Lütfen bu kodu gerçek reklamla kullanırken aynı şeyi kaldırın. Ön izleme için bu https://jsfiddle.net/b2jL5z5w/ kontrol edin.

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