Ditulis oleh: Ditulis pada: 1/08/2020
Update Terbaru Adsense Tentang Sticky Ads - Sebenarnya sticky ads untuk iklan Adsense ini sudah kita ketahui sejak lama ketika Adsense mengeluarkan fitur auto ads dengan iklan jangkar yang muncul menempel di bagian atas atau bawah blog di tampilan ponsel. Kemudian disusul dengan amp-sticky-ad untuk AMP HTML untuk menggantikan iklan jangkar yang belum muncul pada amp-auto-ad.
Namun saat itu Adsense masih memberikan tanda abu-abu untuk sticky ads yang dipasang manual, karena ketika saya mencobanya tidak ada notif apa pun untuk sticky ads yang saya pasang secara manual seperti pada tema Kompi Ajaib AMP v3. Begitu pun untuk iklan yang disimpan di sticky sidebar.
Jadi saat itu saya mengambil kesimpulan bahwa sticky ads baik yang menempel di bawah, di kiri dan kanan blog, atau di sticky sidebar diizinkan oleh Adsense dengan syarat tidak overlaping atau tumpang tindih dengan konten.
Dan ternyata benar, baru saja Adsense mengumumkan update terbaru tentang sticky ads ini melalui webinar Adsense Indonesia yang menyatakan bahwa Adsense memperbolehkan sticky ads dengan syarat yang sudah saya sebutkan tadi di atas.
Namun untuk AMP HTML, sampai saat postingan ini ditulis belum mendukung sepenuhnya untuk sticky ads ini. Saat ini amp-ad belum mendukung penempatan iklan pada elemen yang menggunakan position sticky ataupun fixed. amp-ad hanya mendukung iklan sticky yang nempel di bawah blog dengan menggunakan elemen amp-sticky-ad. Mudah-mudahan cepat mendukung sehingga bisa sticky di sidebar atau di kiri dan kanan blog.
Belakangan saya melihat amp-auto-ad mencoba menampilkan amp-sticky-ad yang mungkin sebagai pengganti iklan jangkar di auto ads non amp, sepertinya masih terus percobaan. Karena belum juga muncul, akhirnya saya pasang manual seperti yang Anda lihat sekarang.
Update Terbaru Sticky Ads
Untuk Anda yang ingin mencoba menggunakan sticky ads ini sebenarnya saya sudah memberikan bahan-bahannya di postingan-postingan sebelumnya. Tapi di postingan ini sekalian akan saya update untuk postingan-postingan sebelumnya tersebut.
1. Membuat Iklan Sticky Pada Template Non AMP
Trik ini bisa Anda ikuti pada postingan berikut:
Namun pada tutorial tersebut, iklan hanya ditampilkan di mobile saja. Agar bisa digunakan di desktop dan mobile, silahkan gunakan kode berikut.
Silahkan simpan kode CSS berikut di atas kode </head>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} 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>Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan di halaman label.
Kemudian silahkan simpan kode berikut di atas kode </body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<div class="sticky-ad" id="sticky-ad">
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->
</b:if>
<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 ketika halaman discroll, 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 di halaman label. Silahkan gunakan unit iklan horizontal dan pilih iklan untuk desktop 728x90 dan untuk iklan mobile 320x50 atau 320x100.
2. Membuat Iklan Sticky Pada Template AMP HTML
Trik ini bisa Anda ikuti pada postingan berikut:
Namun pada tutorial tersebut, iklan hanya ditampilkan di mobile saja. Agar bisa digunakan di desktop dan mobile, silahkan gunakan kode berikut.
Silahkan simpan kode ini di atas kode </head>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
</b:if>Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan di halaman label. Dan pastikan juga blog Anda sudah menggunakan js amp-ad.
Lalu silahkan simpan kode ini di atas kode </body>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel'>
<amp-sticky-ad layout='nodisplay'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- Kode iklan untuk desktop silahkan simpan di bawah ini -->
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='90' type='adsense' width='728'>
</amp-ad>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- Kode iklan untuk mobile silahkan simpan di bawah ini -->
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxx' data-ad-slot='xxxxxxxxxxxx' height='50' type='adsense' width='320'>
</amp-ad>
</b:if>
</amp-sticky-ad>
</b:if>Kemudian silahkan buat unit iklan Adsense display responsive dan catat kode data-ad-client dan data-ad-slot, lalu silahkan ganti kode data-ad-client dan data-ad-slot di kode di atas sesuai dengan kode iklan Anda.
Dan gunakan CSS berikut ini untuk memodifikasi tampilan amp-sticky-ad di tampilan desktop seperti yang digunakan di Kompi Ajaib ini.
amp-sticky-ad{max-width:736px;margin-left:-368px;left:50%}
.amp-sticky-ad-close-button{background-position:center;border-radius:12px 12px 0 0;}
@media screen and (max-width:800px){amp-sticky-ad{margin-left:0;left:0}.amp-sticky-ad-close-button{background-position:9px;border-radius:12px 0 0 0;}}3. Iklan Melayang Di Kiri Kanan Blog
Trik ini bisa Anda ikuti pada postingan berikut:
Namun untuk AMP HTML belum bisa menggunakan iklan Adsense, sementara untuk iklan banner mandiri saja.
4. Iklan Di Sidebar Melayang
Trik ini bisa Anda ikuti pada postingan berikut untuk membuat sidebar melayang atau sticky sidebar:
- Membuat Sticky Sidebar Dengan CSS position:sticky - Ini bisa untuk AMP dan NON AMP.
- Membuat Sticky Widget Dan Berhenti Di Atas Footer - Hanya untuk NON AMP.
Semoga bermanfaat.