Skip to main content

Cara Membuat Iklan Sticky Menempel di Bagian Bawah Layar Ala Kompiajaib

Iklan sticky ini letaknya bukan di sidebar melainkan dibagian bawah layar. Jika kamu pernah mengunjungi blog kompiajaib pasti tahu jenis iklan yang saya maksud. Secara umum tampilannya mirip dengan iklan page-level-ads yang muncul di smartphone. Hanya saja iklan tersebut kita munculkan di versi dekstop.

Mas, apakah memasang iklan tersebut tidak melanggar google better ads?

Tidak, karena kita menggunakan ukuran iklan sticky 728x90px. Iklan sticky yang difilter better ads adalah iklan sticky horizontal yang mempunyai ukuran lebih besar dari itu.

Contoh iklan sticky yang menempel di bawah layar dekstop

Iklan sticky ini juga bisa menjadi alternatif bagi pengguna iklan melayang (floating) yang susah ditutup dan sangat mengganggu. Supaya akun adsense Anda juga lebih aman, karena jenis iklan melayang yang menutupi halaman tidak diperbolehkan.

Sebenarnya tutorial ini sudah dibagikan oleh kompiajaib. Hanya saja tutorial tersebut sedikit berbeda dengan iklan yang ada pada blog kompiajaib. Sehingga beberapa orang yang masih awam mungkin sedikit kesulitan. Oleh karena itu pada artikel ini saya buatkan tutorialnya yang langsung jadi sama persis.

Jika kamu ingin mencobanya silahkan ikuti langkah-langkahnya berikut ini.

Cara memasang iklan sticky di bawah layar dekstop ala kompiajaib


1. Silahkan copy paste css berikut, dan letakkan di atas /head.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; 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:sticky;text-align:center;bottom:-104px;left:calc(50% - 368px);width:736px;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}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}:active,:focus{outline:0}
/*]]>*/
</style>
</b:if>

Kode di atas maksudnya adalah hanya memunculkan iklan sticky pada mode dekstop dengan posisi iklan berada di tengah dengan lebar keseluruhan 736px.

2. Setelah itu untuk menampilkan iklannya copy paste kode berikut tepat di atas /body.

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<div class='sticky-ad' id='sticky-ad'>
<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-slot='9943136880' style='display:inline-block;width:728px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
</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>

Silahkan ganti kode yang saya tandai warna merah dengan kode iklan adsense Anda (gunakan iklan ukuran 728x90).

Itulah tadi cara untuk membuat iklan sticky di bawah layar seperti blog kompiajaib. Jika Anda mengalami kesulitan jangan sungkan untuk berkomentar.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar

Coba aplikasi TipsdanTrik.web.id

Tambahkan aplikasi TipsdanTrik di smartphone tanpa install, buka TipsdanTrik dengan browser Chrome di smartphone. Kemudian klik ikon 3 titikdi browser dan pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi TipsdanTrik dari layar utama smartphone Anda.