Cara Membuat Iklan Sticky Pada Template Non AMP ala amp-sticky-ad
Iklan Sticky merupakan Iklan Anchor iklan seluler yang menempel pada tepi layar pengguna dan dapat ditutup dengan mudah.
Iklan anchor ditampilkan oleh AdSense pada waktu yang optimal untuk membantu meningkatkan pendapatan dan memberikan pengalaman pengguna yang baik bagi pengunjung Anda. Iklan anchor hanya ditayangkan pada halaman yang dioptimalkan untuk seluler di perangkat seluler kelas atas.
Iklan ini sekarang sudah bisa kalian aktifkan dengan fitur page-level ads di auto ads / iklan otomatis yang terdapat pada settingan iklan di akun adsense kalian. Tapi tidak semua fitur ini dapat berjalan dengan semesti nya. Dalam arti terkadang iklan anchor ini tidak tampil pada blog kalian.
Banyak faktor yang membuat iklan anchor ini tidak tampil di blog kalian meskipun iklan tersebut sudah bisa aktif untuk di pasang di blog kalian. Dan terkadang fitur iklan sticky ini selalu berada pada posisi di atas layar ponsel dan akhir nya membuat space kosong di bawah sisi layar ponsel yang membuat tampilan blog kalian tidak enak untuk di lihat.
Pernah kah kalian melihat iklan anchor yang terdapat pada Amp sticky ad yang mempunyai style berbeda dari sticky non amp. Disini saya akan memberikan tutorial menyangkut tentang judul di atas yaitu cara memasang iklan sticky pada non amp dengan model ala amp-sticky-ad.
Model sticky amp-ad ini menurut saya lebih baik di banding Non Amp. Karena iklan tersebut selalu muncul dan pasti nya ini salah satu untuk mengatasi pada iklan sticky yang terkadang tidak muncul di blog kalian.
Lalu apa bisa iklan sticky amp di pasang di non amp? Bisa sob, dengan kalian mengikuti tutorial yang saya berikan di bawah ini. Semua permasalahan langsung teratasi dengan mudah. Bagi sobat yang ingin mencoba nya silahkan ikuti langkah - langkah nya sebagai berikut.
Cara Membuat Iklan Sticky Pada Template Non AMP ala amp-sticky-ad
Silahkan kalian copy kode CSS di bawah ini, lalu letakan kode tersebut 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.
Lalu silahkan kalian copy lagi kode di bawah ini dan letakan kode tersebut 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, maupun halaman hasil pencarian dan ditampilkan hanya di versi mobile. Dan untuk unit iklan nya silahkan sobat gunakan unit iklan horizontal dan pilih iklan mobile 320x50 atau 320x100.
Untuk contoh kalian bisa lihat pada gambar di bawah atau pada blog ini. Karena saya pun juga memasang nya.
Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. Semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Membuat Iklan Sticky Pada Template Non AMP ala amp-sticky-ad. Selamat mencoba!