Cara Membuat Sticky Ads di Template Non AMP seperti amp-sticky-ad Ala Kompi Ajaib

Cara Membuat Sticky Ads di Template Non AMP seperti amp-sticky-ad Ala Kompi Ajaib - Untuk blog Non AMP sebenarnya sudah ada fitur Auto Ads untuk menampilkan iklan sticky pada tampilan mobile dan desktop dengan fitur page level ads.

Namun sticky auto ad ini lebih sering muncul disisi atas layar smartphone, sehingga ada space kosong pada sisi bawah layar smartphone. Tentunya hal ini lah yang membuat Kang Adhy Suryadi menciptakan widget iklan sticky ad untuk mengisi space kosong dibawah layar smartphone tersebut.

Baca juga : Edit Permalink Blogger yang Terlanjur di Publikasikan Tanpa Kehilangan Trafic

Tampilan Banner iklan ini seperti yang ada di blog Kompi Ajaib yang begitu unik ketika dilihat melayang dibagian sisi layar bawah dengan posisi banner ditengah halaman blog.

Banner iklan sticky ini diseratai tombol close disisi kanan atas iklan, dan tidak menutupi keseluruhan pada area bagian bawah blog ini yang membuat Banner iklan sticky ala Kompi Ajaib berbeda dengan iklan sticky seperti pada umumnya.

Baca juga : Cara Membuat Slot Iklan Mandiri Ukuran 300x250 dan 125x125 di Sidebar Blog

Banner iklan sticky ini akan muncul ketika pengunjung blog men-scroll halaman blog, untuk demo iklan sticky di template Non AMP ala Kompi Ajaib ini silahkan coba pada result Codepen berikut ini. Silahkan Anda scroll di dalam Result-nya untuk melihat penampakan iklan.

See the Pen
Sticky ads non amp by Snow (@tami73)
on CodePen.

Jika Anda ingin mencoba Membuat Sticky Ads di Template Non AMP seperti amp-sticky-ad Ala Kompi Ajaib ini silahkan ikuti langkahnya berikut ini.

Silahkan Anda letakan kode CSS berikut tepat diatas kode <head/>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel'>
<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;
  width: 100%;
  max-width:736px;
  margin-left:-368px;
  left:50%;
  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: 4px 4px 0;
  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: center;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 12px 12px 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
}
@media screen and (max-width:800px){.sticky-ad{margin-left:0;left:0}.sticky-ad-close-button{background-position:9px;border-radius:12px 0 0 0;}}
/*]]>*/
</style>
</b:if>

Selanjutnya Anda letakan kode berikut diatas kode </body>

 <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel'>
<div class='sticky-ad' id='sticky-ad'>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->

</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->

</b:if>

<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
</div>
<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ad');
  if(window.pageYOffset > 200){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if> 

Angka 200 adalah untuk mengatur posisi ketinggian pada iklan ketika halaman sudah di scroll, silahkan sesuaikan dengan keinginan Anda, contoh dengan mengganti angkanya menjadi 300 atau 100 bisa juga dengan angka lainnya.

Baca juga : Cara Terbaru Meletakan Iklan Adsense di Tengah Postingan Blog

Iklan diatas tidak hanya ditampilkan pada mobile saja namun juga di desktop, Disarankan untuk menggunakan unit iklan ukuran 728x90 untuk desktop dan ukuran 320x50 atau 320x100 untuk mobile.

Share this post