Cara Membuat Iklan Adsense (Page Level Ads Sticky) Berada Di Bawah Layar

Abdi Apr 05, 2018 Apr 05, 2018 3 min read

Cara Membuat Iklan Adsense Berada Dibawah (Page Level Ads Sticky Bottom) Menempel berada bawah layar – Page Level Ads Atau Iklan Stiky Ads adalah iklan yang menempel Di bawah layar Blog pada tampilan Mobile atau Hp, menurut saya Iklan ini cukup Lumayan berpengaruh pada penghasilan, karena iklan ini selalu muncul dan loadingnya pun tidak terlalu berat dan tidak berpengaruh pada loading blog. Sebenarnya bentuk format ini sudah disediakan oleh google yaitu iklan page level ads, namun sekarang iklan page level ads muncul berada diatas layar. Dan untuk cara yang saya bagikan ini iklan berada di bottom atau bagian bawah layar Smartphone.

Sebenarnya Cara ini saya dapatkan diblog Mas Adhy Suryadi Yaitu Blog Kompi Ajaib Yang mana iklan ini adalah hasil modifikasi oleh beliu kang Adhy dari Amp-sticky-Ads Dan bisa anda gunakan pada blog Non AMP. Untuk Tampilannya bisa anda lihat dibawah ini.

Jika Anda berminat silahkan ikuti cara membuatnya dibawah ini.

Pertama Silahkan anda Copy Kode CSS dibawah ini dan Silahkan anda letakan di atas Kode </head>


<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<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 Copy kode dibawah ini Dan Letakan Diatas Kode </body>


<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<!-- Kode iklan silahkan simpan di bawah ini -->

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

Silahkan masukan Kode Iklan Anda Pada Tempat Yang saya Tandai, Langkah Terakhir Simpan Template Dan silahkan Anda lihat pada Tampilan Mobile/Smartphone.

Hanya itu yang bisa saya bagikan kali ini tentang Cara Membuat Iklan Adsense (Page Level Ads Sticky) Berada Di Bawah Layar. Semoga bermanfaat.

Sourh Code : www.kompiajaib.com