Ditulis oleh: Ditulis pada: 2/02/2022
UPDATE Iklan Sticky Manual Untuk Adsense 2022 - Sebelumnya saya sudah membahas perihal sticky ads ini, namun pada iklan sticky tersebut belum memiliki gap di bawah blog. Sehingga ketika halaman digulung mentok ke bawah blog, maka iklan sticky menutupi footer blog.
Untuk itu, kali ini saya membuat iklan sticky manual ini memiliki gap di bawah blog dan ketika iklan sticky di-close maka gapnya juga ikut menghilang sehingga tampilan blog tetap rapih.
Mungkin ada yang bertanya, kenapa harus repot-repot membuat iklan sticky manual, kan sudah ada iklan anchor dari Adsense?
Betul, Adsense sudah menyediakan iklan sticky melalui iklan anchor. Namun pada beberapa blog, anchor ads kadang muncul kadang tidak, terutama pada mobile.
Untuk itu, bisa mencoba menggunakan iklan sticky manual ini sebagai pilihan alternatif anchor ads.
Jika ingin mencoba menggunakan iklan sticky ini, maka yang harus dilakukan terlebih dahulu adalah menonaktifkan anchor ads Adsense melalui dashboard Adsense.
Iklan > Ringkasan > Berdasarkan Situs > Klik ikon pensil pada domain yang dimaksud > Lalu nonaktifkan anchor ads.
Kemudian silahkan gunakan kode-kode berikut untuk menggunakan iklan sticky manual. Silahkan simpan di atas kode </body>
Untuk blog tanpa Lazyload Adsense
<b:if cond='data:blog.pageType not in {"static_page","error_page"} 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:0;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,.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,.2);border:none;border-radius:12px 0 0;cursor:pointer}
.sticky-ad-close-button:before{position:absolute;content:"";top:-20px;right:0;left:-20px;bottom:0}
body{padding-bottom:132px;}
body.nosticky{padding-bottom:0;}
/*]]>*/
</style>
</b:if>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<div class='sticky-ad' id='sticky-ad'>
<!-- Kode iklan silahkan simpan di bawah ini -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxx' style='display:block;max-width:1005px;width:100%;height:100px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';document.body.className += " nosticky";'/>
</div>
</b:if>
<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 -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxx' style='display:block;min-width:320px;max-width:1005px;width:100%;height:100px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';document.body.className += " nosticky";'/>
</div>
</b:if>Untuk blog dengan Lazyload Adsense
<b:if cond='data:blog.pageType not in {"static_page","error_page"} 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,.2);margin-bottom:0;padding-top:4px;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transition-property:-webkit-transform;transition-property:transform}
.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:0;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,.2);border:none;border-radius:12px 0 0;cursor:pointer}
.stickyon .sticky-ad-close-button{top:-28px;}
.sticky-ad-close-button:before{position:absolute;content:"";top:-20px;right:0;left:-20px;bottom:0}
.stickyon{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
body{padding-bottom:132px;}
body.nosticky{padding-bottom:0;}
/*]]>*/
</style>
<script>
//<![CDATA[
var lazysticky = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazysticky === false) || (document.body.scrollTop != 0 && lazysticky === false)) {
document.getElementById('sticky-ad').className += " stickyon";
lazysticky = true;
}
}, true);
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<div class='sticky-ad' id='sticky-ad'>
<!-- Kode iklan silahkan simpan di bawah ini -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxx' style='display:block;max-width:1005px;width:100%;height:100px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';document.body.className += " nosticky";'/>
</div>
</b:if>
<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 -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxx' style='display:block;min-width:320px;max-width:1005px;width:100%;height:100px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById('sticky-ad').style.display='none';document.body.className += " nosticky";'/>
</div>
</b:if>Lalu buatkan unik iklan display responsive kemudian sesuaikan kode yang ditandai di atas tadi.