Cara Membuat Iklan Sticky Pada Blog Non AMP ala amp-sticky-ad

Iklan Sticky adalah Iklan Anchor yang tampil khusus perangkat seluler yang biasanya muncul dan menempel pada tepi layar bagian atas seluler ketika sedang mangakses blog kita dan iklan sticky ini dapat ditutup dengan mudah.

Untuk pengguna blog Non Amp, iklan sticky ini dapat kita pasang di blog dengan cara mengaktifkan Auto Ads atau iklan otomatis yang sudah di lengkapi dengan fitur page-level-ads. Akan tetapi sticky ada ini sekarang lebih banyak tampil di sisi bagian atas layar ponsel yang disebabkan oleh beberapa faktor dan membuat sisi bawah layar ponsel yang biasanya juga di tempat sticky ad ini menjadi kosong.

Dan untuk menutupi space kosong di bagian bawah tersebut kita dapat mengakalinya dengan cara memasang iklan sticky khusus yang akan muncul di bagian bawah layar ponsel.

Iklan sticky untuk blog Non Amp ini akan tampil melayang di bagian bawah layar ponsel dan bisa di katakan sticky ad ini memiliki tampilan sama persis dengan iklan sticky yang muncul di blog Amp. Dan untuk membuat iklan sticky pada blog yang menggunakan template Non Amp ini dibutuhkan bantuan CSS dan javascript.

Iklan sticky untuk blog Non AMP ini akan otomatis muncul ketika pengunjung men-scroll atau menggulung halaman blog ke bawah yang ketinggian kemunculannya bisa diatur pada javascript. Dan Untuk menutup iklan ini juga sama persis dengan amp-sticky-ad yang sudah disediakan tombol close/tutup di sisi bagian kanan atas iklan.

Baca Juga : Cara Membuat Iklan Link Tautan Adsense Dengan Banyak Tombol

Iklan sticky ala amp-sticky-ad ini menurut saya lebih elegan jika di bandingkan dengan iklan melayang / floating ads, selain itu sticky ad ini juga tidak melanggar peraturan kebijakan adsense. Jadi tidak ada salahnya jika sobat mulai menggunakan stciky ad ala amp sticky ad ini di blog non amp yang sobat gunakan.

Untuk demo iklan sticky pada template Non AMP ala amp-sticky-ad ini bisa di cek dibawah ini, silahkan klik tombol demo dan scroll di dalam widgetnya untuk melihat penampakan iklannya.

Selanjutnya, jika sobat trtarik untuk memasang Iklan Sticky ala amp-sticky-ad Pada Blog Non AMP silahkan simak tutorial singkatnya dibawah ini

Membuat Iklan Sticky Pada Blog Non AMP

Login ke Blogger - Template - Edit HTML - Salin kode CSS berikut dan simpan sebelum 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>

Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile.

Selanjutnya, silahkan salin javascript berikut dan simpan sebelum 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>

• Angka 300 untuk mengatur ketinggian kemunculan iklan, silahkan sesuaikan dengan keinginan Anda misal menggantinya dengan 150 atau angka lainnya.
• Iklan di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile.
• Silahkan ganti dengan kode iklan adsense. Jika error dalam penyimpanan, silahkan Parse terlebih dahulu.
• Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.

Terakhir, silahkan Simpan setelan template

Baca Juga : Membuat Iklan Adsense Di Dalam Postingan Dengan Pemanggil Menggunakan Javascript

Demikian tutorial cara membuat iklan sticky pada blog non amp ala amp-sticky-ad yang dapat dibagikan kali ini semoga bermanfaat.

Share this post