Sebenarnya jika hendak menampilkan sticky AdSense di top of a web page, Anda bisa mengaktifkan fitur Anchor di Ad-format Auto Ads. Namun anchor ads yang ada di Auto Ads itu hanya ditampilkan di mobile, tidak akan muncul jika laman dibuka dengan menggunakan desktop.
Jika memasang sticky AdSense buatan sendiri, maka iklan akan muncul di desktop maupun di mobile browser. Meskipun pengunjung yang membuka laman blog sebagian terbesar menggunakan mobile phone, namun tak ada salahnya untuk menampilkan sticky ads pada dekstop juga.
Yang perlu diperhatikan adalah bahwa Anda hanya boleh menampilkan sticky AdSense di top of a web page saja atau di bottom of a web page saja, tidak boleh di kedua-duanya. Ini tentu karena memasang sticky ads di puncak dan dasar halaman akan memberi kesan dan pengalaman yang buruk bagi pengunjung.
Setidaknya saya melihat ada dua script yang sedikit berbeda untuk membuat sticky AdSense di bottom of a page, namun yang saya gunakan di blog ini seingat saya adalah dari script dan css yang saya dapatkan dari laman kompiajaib.com yang sedikit saya modifikasi. Perubahan itu, selain soal selera, juga memungkinkan tampilnya iklan dengan panjang maksimal pada desktop.
Sebelum lanjut mungkin ada pertanyaan mengenai apakah membuat Sticky AdSense tidak melanggar ToS AdSense. Jawabnya adalah tidak, setelah Google melonggarkan aturan dengan memperbolehkan pemasangan sticky ads asalkan tidak menutupi halaman, dan hanya di satu lokasi. Artinya aman jika memasang sticky ads dengan tinggi maksimal 100px, baik di desktop maupun mobile.
Cara membuat sticky AdSense di Bottom of a Web Page
Ikuti langkah berikut ini untuk menampilkan sticky ads di dasar halaman.- Login ke Blogger > Theme > Edit HTML. Jika memakai New Blogger, setelah klik Theme lalu klik titik tiga bertumpuk dan klik Edit HTML
- Back up Theme Anda, dengan tekan Ctrl-A (command-A), salin, lalu lekat ke Notes di komputer Anda.
- Salin kode CSS di bawah ini dan lekatkan ke bagian style CSS Theme Anda
.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: -100px; width: 100%; margin-left:0; left:0%; z-index: 999; max-height: 100px; background-image: none; background-color: none; margin-bottom: 0; padding: 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: none; 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 (min-width: 748px){.sticky-ad {max-width:736px;margin-left:-368px;left:50%;}}
@media (min-width: 871px){.sticky-ad {max-width:968px;margin-left:-484px;left:50%;}} - Selanjutnya salin dan lekatkan script di bawah ini di footer atau sebelum </body>
<div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' style='display:inline-block;max-width:970px;width:100%;height:100px' data-ad-client='ca-pub-XXXXXXXXXXXXXXXX' data-ad-slot='XXXXXXXXXX'></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <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 > 0){target.style.bottom = '0';}},false);
//]]></script> - Save, dan lakukan pengujian dengan membuka salah satu halaman di blog Anda.
Cara Membuat Sticky AdSense di Top of a Web Page
Jika ingin bereksperimen dengan membandingkan kinerja, maka ikuti langkah berikut ini. CSS dan script ini merupakan hasil coba salah yang saya lakukan dengan membuat sejumlah perubahan pada CSS dan script Sticky AdSense untuk posisi bottom of a page.- Salin kode CSS di bawah ini dan lekatkan ke bagian style CSS Theme Anda
.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; top: 0; width: 100%; margin-left:0; left:0%; z-index: 999; max-height: 100px; background-image: none; background-color: none; margin-top: 0; padding: 0; transition: all .4s ease-in-out;}
.sticky-ad-close-button { position: absolute; width: 28px; height: 28px; bottom: -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: none; background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 0 0 12px 12px; cursor: pointer;}
.sticky-ad-close-button:before { position: absolute; content: ""; top: -120px; 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 (min-width: 748px){.sticky-ad {max-width:736px;margin-left:-368px;left:50%;}}
@media (min-width: 871px){.sticky-ad {max-width:968px;margin-left:-484px;left:50%;}} - Selanjutnya salin dan lekatkan script di bawah ini di footer atau sebelum </body>
Perhatikan bahwa script di bawah ini agak berbeda dengan script untuk sticky AdSense di bottom of page.
<div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' style='display:inline-block;max-width:970px;width:100%;height:100px' data-ad-client='ca-pub-XXXXXXXXXXXXXXXX' data-ad-slot='XXXXXXXXXX'></ins> <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <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 > 0){target.style.top = '0';}},false);
//]]></script> - Save, dan lakukan pengujian dengan membuka salah satu halaman di blog Anda.
Lihat Video
Demikian cara membuat Sticky AdSense di bottom of a page dan juga top of a page. Semoga bermanfaat dan selamat mencoba.
Label: AdSense, Inspirasi, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
