-->

Cara Membuat Sticky Ads AdSense di Blog

Sticky Ads AdSense di Blog

Cara Membuat Sticky Ads AdSense di Blog, Sticky Ads ini sudah banyak digunakan oleh situs-situs besar seperti TribunNews, Kompas, Detik dan sebagainya. Karena sangat bermanfaat untuk meningkatkan RKT (Clik) iklan kita, terkadang unit iklan ini sangat mengganggu apabila ukuran iklan nya besar tapi dalam artikel ini sudah dioptimalkan dan sangat aman untuk digunakan di blog Sobat.

Namun, jangan sekali-kali merubah script yang sudah diberikan sebab akan berakibat terhadap penampilan dan fitur menjadi tidak berjalan.

Karena itu jangan merubah script yang diberikan kecuali ada arahan dari Admin. Untuk itu kita langsung saja ke tutorialnya terlebih dahulu.

Cara Membuat Sticky Ads AdSense di Blog dengan Mudah

  • Buka dashboard Blogger sobat.
  • Pilih menu Tema > Edit HTML.
  • Cari kode </head> lalu letak script berikut tempat dibawah kode </head>.
  • 
      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    <style>
    /*<![CDATA[*/
    .sticky-ad {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      overflow: visible;
      position: fixed;
      text-align: center;
      bottom: -104px;
      left: 0;
      width: 100%;
      z-index: 999;
      max-height: 104px;
      background-image: none;
      background-color: #fff;
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
      margin-bottom: 0;
      padding-top: 4px;
      transition: all .4s ease-in-out;
    }
    .sticky-ad-close-button {
      position: absolute;
      width: 28px;
      height: 28px;
      top: -28px;
      right: 0;
      background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
      background-size: 13px 13px;
      background-position: 9px;
      background-color: #fff;
      background-repeat: no-repeat;
      box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
      border: none;
      border-radius: 12px 0 0 0;
      cursor: pointer;
    }
    .sticky-ad-close-button:before {
      position: absolute;
      content: "";
      top: -20px;
      right: 0;
      left: -20px;
      bottom: 0;
    }
    * {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    :active,
    :focus {
      outline: 0
    }
    /*]]>*/
    </style>
    </b:if>
      
  • Kemudian salin kode dibawah dan tempel sebelum tag </body>.
  • 
      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    <div class="sticky-ad" id="sticky-ad">
    
    <!-- Kode iklan letakkan di sini -->
    
    <button class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';" aria-label="Close this ad"></button>
    </div>
    
    <script>
    //<![CDATA[
    window.addEventListener("scroll",function(){
      var target = document.getElementById('sticky-ad');
      if(window.pageYOffset > 300){
       target.style.bottom = "0";
      }
    },false);
    //]]>
    </script>
    </b:if>
      
  • Kemudian rubah kode yang sudah ditandai dengan kode iklan Adsense Sobat, ukuran iklan 320x50.
  • Langkah terakhir, jangan lupa Simpan dan tunggu beberapa menit sampai iklan tersebut muncul.

Itulah Cara Membuat Sticky Ads AdSense di Blog yang dapat Admin bagikan, apabila ada pertanyaan silahkan komen di kolom yang sudah tersedia. Semoga bermanfaat, sekian dan terimakasih.