Membuat iklan sticky non AMP pada blog

Membuat iklan sticky non AMP pada blog - Selamat datang di Addysresign, pada postingan kali saya akan memberikan cara memasang iklan adsense  sticky non AMP di bawah pada blog anda.

contoh iklan

Sebelum ke inti pembahasan saya akan memberikan sedikit tentang memasang iklan adsense  sticky non AMP di bawah pada blog , iklan ini merupakan versi terbaru dari sang pembuat yaitu kompi ajaib.

Kelebihan menggunakan style AMP sticky-ad ini hanya menggunakan Javascript yang ringan untuk menampilkan iklan setelah anda scroll. Jadi cara kerjanya yaitu jika pengunjung meng scroll layarnya maka iklan akan muncul pada bagian bawah.

Cara memasang style AMP sticky-ad pada website, Simak cara pemasangan berikut ini.

1. Login blogger.com > Setting > Theme > Edit theme.

2. Save kode CSS berikut ini 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>

Note : kode diatas hanya tampil pada versi mobile dan tidak tampil pada halaman pencarian google, halaman static dan halaman eror.

3. Cari </body> dan masukan kode CSS berikut ini di atasnya.

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

Note : 

1. Untuk merubah tinggi iklan ubah angka 300 menjadi 100 atau lainnya.

2. Gunakan unit iklan dengan ukuran 320x100 maupun 320x50 pada bagian bawah tulisan di dalam kode di atas, Pastikan kode iklan anda sudah di Parse agar iklan muncul.

Cukup mudah bukan untuk menerapkannya. Sekian pembahasan kali ini terkait pemasangan iklan sticky-ad non amp pada blogger.

Sumber :

Mas kompi ajaib https://www.google.com/amp/s/www.kompiajaib.com/2018/03/membuat-iklan-sticky-pada-template-non.html%3famp=1

Share this post