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.
Selesai...selamat mencoba dan semoga bermanfaat.