Ditulis oleh: Ditulis pada: 3/06/2018
Sebenarnya untuk blog Non AMP sudah ada Auto Ads untuk menampilkan iklan sticky khusus pada tampilan mobile dengan fitur page-level ads. Namun sticky ad ini sekarang lebih suka tampil di sisi atas layar ponsel, akhirnya ada space kosong di sisi bawah layar ponsel.Hal inilah saya kemudian membuat widget iklan sticky ala amp-sticky-ad untuk memenuhi permintaan beberapa sahabat Kompi Ajaib untuk mengisi space kosong di bawah layar ponsel yang sebelumnya diisi iklan page-level namun sekarang pindah ke atas layar.
Sesuai dengan namanya iklan sticky untuk Non AMP ala amp-sticky-ad, maka tampilannya pun sama karena menggunakan style amp-sticky-ad, hanya menggunakan sedikit javascript untuk menampilkan iklan setelah scroll.
Iklan sticky untuk template Non AMP ini akan muncul setelah pengunjung men-scroll atau menggulung halaman ke bawah yang ketinggian kemunculannya bisa kita atur pada javascript.
Untuk menutup iklan juga sama seperti pada amp-sticky-ad dengan klik tombol close di sisi kanan atas iklan dengan menggunakan javascript onclick event.
Nah bagi yang sebelumnya menggunakan iklan sticky atau iklan melayang atau istilahnya iklan floating yang kadang susah ditutup sehingga menghalangi layar yang menyebabkan pengunjung kesulitan membaca isi artikel, sebaiknya coba beralih ke iklan sticky ini agar akun Anda menjadi lebih aman. Karena kita tahu bahwa iklan yang menutupi laman tidak diperbolehkan yang bisa menyebabkan akun menjadi tidak aman.
Untuk demo iklan sticky pada template Non AMP ala amp-sticky-ad ini silahkan coba pada widget JSFiddle berikut ini, silahkan scroll di dalam widgetnya untuk melihat penampakan iklannya.
Jika Anda ingin mencobanya, silahkan ikuti langkahnya berikut ini.
Silahkan simpan kode CSS berikut di atas kode
</head>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" 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.
Kemudian silahkan simpan kode berikut di atas kode
</body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" 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 100 atau angka lainnya.Iklan di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan ditampilkan hanya di versi mobile. Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.
Selesai...selamat mencoba dan semoga bermanfaat.