Cara Pasang Iklan Sticky pada Blogger Secara Manual untuk Desktop dan Mobile

Iklan sticky adalah format iklan banner yang melayang atau mengambang pada layar serta menempel  atau lengket pada tepi layar situs yang terpisah dengan konten dan dapat ditutup dengan mudah. Biasanya terletak di pinggir kanan atau pinggir kiri serta bisa juga terletak di ujung bawah atau di ujung atas. Dengan demikian iklan sticky tidak boleh tumpang tindih secara permanen dengan konten maupun iklan lainnya.

Istilah padanan atau yang menjadi persamaan iklan sticky adalah iklan jangkar (anchor Ads) atau iklan tanda pagar (silakan lihat daftar format iklan otomatis pada akun Google Adsense, di dalamnya terdapat jenis iklan "tanda pagar"). Di mana jenis iklan otomatis tersebut hanya tersedia khusus untuk mobile site. Letaknya di tepi atas atau tepi bawah halaman. Untuk meletakkan di tepi bawah perlu dilakukan edit HTML.

Di tulisan ini tidak akan membahas tentang bagaimana cara memasang iklan otomatis berformat "tanda pagar" atau jangkar (anchor) seperti disebutkan di atas. Akan tetapi mengulas bagaimana cara menggunakan  sticky ads manual. Di mana, perlu diketahui setelah kalian berhasil memasang iklan sticky secara manual maka segera non aktifkan iklan "tanda pagar" format iklan otomatis untuk menghindari tumpang tindih iklan.

Manfaat menggunakan iklan format Anchor ini adalah dapat meningkatkan CTR (rasio klik-tayang). Di mana CTR yang tinggi bertanda bahwa pengguna merasa iklan tersebut relevan dan berguna. Selain itu, penghasilan yang didapat dari iklan jenis sticky tersebut jauh akan lebih meningkat daripada sebelumnya. Bisa dikatakan iklan sticky ini jadi primadona.

contoh penampakan iklan sticky versi seluler dan desktop

Beruntunglah, kini Google Adsense membolehkan semua publisher pemilik akun Google Adsense dapat memasang iklan sticky di halaman blog, situs, atau websitenya. Tanpa perlu mendaftar maupun harus melampaui tahapan tertentu terlebih dulu. Untuk pengguna blogger cukup memasang kode HTML di menu: Tema --> Edit HTML.

Namun, bukan berarti publisher bebas membuat dan meletakkan sticky ads semaunya sendiri. Tetap harus hati-hati dalam membuat agar tidak melanggar kebijakan Google Adsense. Misalnya ukuran iklan sticky dibuat sewajarnya dan diletakkan di posisi paling pinggir (kanan, kiri, atas, dan bawah) halaman.

contoh animasi gerak iklan sticky untuk seluler yang terlalu lebar (sumber gambar)

Pastikan juga iklan sticky dapat bergerak dengan lancar tanpa hambatan (jeda) saat di-scroll ke atas maupun bawah. Pergerakan iklan yang terputus-putus sangat berpotensi terjadi pelanggaran kebijakan. Begitu pula mengakali implementasi sticky ads agar bisa mengikuti pergerakan krusor mouse juga tak dibolehkan. Tak hanya itu, pastikan juga iklan sticky tidak muncul di link navigasi.

Tampilan sticky ads manual versi desktop ukuran 728 x 90

Seperti iklan lengket yang melekat pada blog Banjir Embun ini juga memiliki ukuran yang sesuai saran dari pihak Google. Yakni, untuk desktop 728 x 90 dan untuk mobile berukuran 320 x 50. Sebenarnya ukuran tersebut tidak pakem. Google Adsense memberikan keleluasaan untuk menyesuaikan ukuran iklan dengan ukuran halaman situs.

tampilan sticky ads manual versi mobile ukuran 320 x 50

Namun, untuk ukuran di atas diyakini paling aman. Terutama untuk para publisher yang memiliki akun blogger dengan blog yang masih minim tayang halamannya. Sebab ukurannya tidak terlalu lebar sehingga tak cenderung berdampak negatif pada pengalaman pengunjung. Pun, kemungkinan terjadi invalid klik juga makin kecil.

Sebelum memutuskan untuk memasang iklan sticky ads manual seperti yang dimiliki Banjir Embun ini perlu diketahui beberapa kelebihan dan kelemahan jenis iklan tersebut. Di antaranya:

1. Iklan ini mudah ditutup dengan posisi tombol "close" sangat mudah untuk dilihat dan ditekan. Dengan begitu akun Google Adsense kalian akan cenderung lebih aman dari "kartu kuning". 

2. Iklan tidak akan muncul di halaman statis biasanya untuk privacy police, disclaimer, about me, dll (intinya bukan halaman utama situs). Serta tidak akan muncul di halaman error maupun halaman hasil kotak pencarian situs.

3. Hanya muncul di tayangan situs versi seluler.

Langsung saja berikut cara memasang iklan melayang khusus untuk blogger:

A. Untuk Desktop

Letakkan kode di bawah ini tepat di atas kode </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'><style>/*<![CDATA[mankoin.com*/.sticky-ad{display:none;-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;left:0;width:100%;z-index:999;max-height:100px;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;max-width:100%;height:100px;bottom:0;-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}@keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-size:24px 24px;background-position:2px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:0;border-radius:12px 0 0 0;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");padding:0}/*]]>*/</style><div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' data-ad-client='ID Google Adsense Kalian' data-ad-slot='ID Unit iklan kalian' style='display:inline-block;width:970px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position=&apos;relative&apos;;this.style.display=&apos;none&apos;;'/></div><script>//<![CDATA[
function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);//]]></script></b:if>

Setelah kode di atas dicopy-pastekan pada halaman edit HTML jangan langsung tekan tombol "Simpan tema". Sebab kalian harus melakukan sedikit pengeditan dulu. Di mana kalian harus membuat iklan baru "menurut unit iklan" yaitu format iklan Display. Lalu ID iklan baru itu disisipkan pada kode di atas.

Ubah ukuran iklan Display itu dari "responsif" menjadi "tetap". Tentukan lebar menjadi 728 dan tinggi menjadi 90. Beri nama iklan tersebut lalu tekan tombol  "BUAT". Dapatkan ID atau nomor inisial iklan tersebut lalu copy-pastekan pada kode di atas tepat di huruf warna merah tertulis ID Unit iklan kalian. Ganti tulisan itu dengan ID unit iklan yang sudah dibuat tadi.

B. Untuk Mobile

Buka akun blogger lalu pilih menu "Tema" terus tekan "Edit HTML". Lalu cari kode </head> dengan cara letakkan kursor di halaman edit HTML lalu ketik CTRL+F. Setelah muncul kotak kecil di pojok kanan atas halaman edit masukkan kata kunci "</head>. Letakkan kode panjang di bawah ini tepat di atas kode </head> tersebut.

<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>

Simpan kode di atas pada halaman edit HTML tanpa melakukan perubahan sedikitpun. Lalu langkah berikutnya copy-paste kode cukup panjang di bawah ini tepat di atas 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 -->

<ins class='adsbygoogle' data-ad-client='ID Google Adsense Kalian' data-ad-slot='ID Unit iklan kalian' style='display:inline-block;width:320px;height:50px'/><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>

Setelah kode di atas diletakkan pada halaman edit HTML jangan tekan tombol "simpan tema" dulu. Sebab kode di atas perlu diedit lebih dulu sebelum diimplementasikan pada blog kalian. Kalian harus membuat iklan baru "menurut unit iklan" yaitu format iklan Display. 

Ubah ukuran iklan dari "responsif" menjadi "tetap". Tentukan lebar menjadi 320 dan tinggi menjadi 50. Beri nama iklan tersebut lalu tekan tombol  "BUAT". Dapatkan ID atau nomor inisial iklan tersebut lalu copy-pastekan pada kode di atas tepat di huruf warna merah tertulis ID Unit iklan kalian. Ganti tulisan itu dengan ID unit iklan yang sudah dibuat tadi.

Selamat kini blog kalian sudah memiliki iklan Sticky yang terletak di tepi bawah.

Ikuti Medsos kami:

Baca tulisan menarik lainnya: