Cara Membuat Iklan Melayang di Bawah Blog

Bagi yang sebelumnya menggunakan iklan sticky atau iklan melayang atau istilahnya iklan floating yang kadang susah ditutup sehingga menghalangi layar yang menyebabkan pengunjung kesulitan membaca isi artikel, sebaiknya coba beralih ke iklan sticky ini agar akun Anda menjadi lebih aman. Karena kita tahu bahwa iklan yang menutupi laman tidak diperbolehkan yang bisa menyebabkan akun menjadi tidak aman.

Bagi sebagian besar para blogger mempunyai iklan seperti iklan adsense, iklan pribadi atau iklan sejenis lainnya yang dapat di masukan di blog anda, namun sering kali banyak keluhan tentang penampatan iklan yang kurang strategis dan sedikit sekali yang mengunjungi atau yang mengklik iklan yang sudah tampil tersebut. Nah, dengan banyaknya keluhan tersebut mungkin dengan cara menempatkan iklan melayang dibawah blog menjadi solusi bagi anda yang sedikit klik iklan pada blog anda.

Membuat iklan melayang di bawah footer blog mungkin banyak yang mengira akan melanggar TOS dari beberapa menyedia layanan iklan seperti adsense, namun menurut saya itu tidak menjadi masalah, karena peraturan tos dari penyedia layanan iklan biasanya membahas tentang ketergangguan atau keterpaksaan pengunjung untuk mengklik iklan, beda dengan menempatkan iklan di bawah blog dengan melayang apa lagi disertai dengan tombol close yang memberikan kebebasan untuk para pengunjung yang mau mengklik atau menutup iklan tersebut, jadi iklan melayang dibawah itu menurut saya tidak melanggar TOS asal tidak menutup konten di blog.

Ada dua cara untuk memasang iklan melayang di di blog, jadi silahkan simak cara berikut ini dengan baik.

Cara Membuat Iklan Melayang di Bawah Blog

Cara pertama.

Simpan kode CSS berikut di atas 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>

Kode di atas tidak ditampilkan di halaman static, halaman error, dan halaman hasil pencarian dan Hanya ditampilkan di versi mobile.

Kemudian cari kode </body> dan letakkan kode dibawah ini diatasnya

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

<script>
//<![CDATA[
window.addEventListener("scroll",function(){
  var target = document.getElementById('sticky-ad');
  if(window.pageYOffset > 300){
   target.style.bottom = "0";
  }
},false);
//]]>
</script>
</b:if>

Angka 300 untuk mengatur ketinggian kemunculan iklan, silahkan sesuaikan dengan keinginan Anda misal menggantinya dengan 100 atau angka lainnya. Silahkan gunakan unit iklan horizontal dan pilih iklan mobile 320×50 atau 320×100.

Cara Kedua

Buka dasboard blog anda.

Lalu anda bisa masuk kemenu “Tata Letak” dan klik “Tambah Gadget“.

Setelah itu klik “HTML/Javascript“, Kosongkan Judul dan Masukan Kode dibawah ini.

<!-- floating ads http://mahesa.id/ -->
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 120px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 10px;'>
<img id='closed' src='http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png'/></div>
<div style='clear: both;'></div>
<p><p><center>

TAMBAHKAN KODE IKLAN DISINI

</center></p>
</p>
</div>

Klik simpan dan lihat hasilnya.