Cara pasang iklan Sticky di Blogger dengan kode HTML


Iklan sticky atau iklan Anchor Adalah iklan pada blog atau website yang menempel dibawah atau diatas artikel dan iklan ini tetap terlihat ketika pengunjung menggulir halaman kebawah atau keatas atau bisa disebut dengan iklan yang melayang.

Iklan sticky atau iklan Anchor ini sangat membantu publisher untuk meningkatkan jumlah klik. iklan Sticky hanya akan tampil di perangkat seluler dan tidak akan tampil di dekstop. iklan sticky atau anchor di lengkapi dengan tombol (tutup iklan) jika pengunjung ingin menutup iklan tersebut. Karena bentuknya yang kecil iklan anchor tidak akan mengganggu atau menutupi halaman blog Anda.

Sebenarnya iklan Anchor/sticky ini sudah tersedia di pengaturan unit iklan pada adsense, Namun banyak publisher yang mengeluhkan jika memakai iklan anchor bawaan dari Adsense tampilannya sedikit menggaganggu karena akan ada ruang kosong ketika iklan ini muncul diblog. Maka akan saya bagikan kode iklan yang dapat menampilkan iklan sticky atau anchor tanpa menggunakan iklan otomatis bawaan adsense. kelebihan dari iklan sticky yang saya temui ini memiliki tampilan yang lebih menarik dan tidak menyebabkan adanya ruang kosong ketika iklan anchor ini muncul.



Cara buat Iklan Anchor atau sticky diblogger


1. Masuk ke blogger >> Tema >> Edit HTML >> Salin dan simpan kode berikut diatas kode <Head>.

 
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&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: 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, 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, 0.2);
  border: none;
  border-radius: 12px 0 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>


2. Dan simpan kode HTML berikut diatas kode <body>

 
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<div class="sticky-ad" id="sticky-ad">
<!-- Kode iklan silahkan simpan di bawah ini -->
<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>


Untuk memudahkan mencari kode <head> dan <body> klik ctrl+F di dalam kotak edit html pada tema blog Anda. Ganti Angka 300 untuk menyesuaikan tinggi iklan Sticky atau anchor. letakan kode iklan adsense Anda sesuai dengan perintah kode html diatas atau pada kode saya tebalkan.

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel