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 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.
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
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>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>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
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>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>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 Blo
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:Semoga bermanfaat.
Adhy S