Cara Memasang Iklan Adsense Melayang di Blog Versi Mobile

HiiroDev - Yahallo sobat dev di artikel kali ini saya akan membagikan kekalian cara menempatkan iklan adsense melayang di blog versi mobile dengan mudah tentunya ..

Adsense adalah platfrom media periklanan terbesar milik google yang banyak di gunakan oleh kalangan blogger di seluruh dunia untuk saat ini. Hampir semua blog dan platfrom lain yang kalian kunjungi pasti kebanyakan menggunakan iklan adsense di artikelnya. Namun tidak sedikit para blogger yang tidak menggunakan adsense karena belum memenuhi persyaratan.

Dalam format dan penempatan sebuah iklan, adsense menawarkan beberapa varian yang bisa di pilih oleh para publisher. Banyak bermacam" jenis iklan yang di sediakan oleh adsense seperti iklan banner, iklan teks, iklan responsive iklan untuk versi mobile, dan masih banyak lagi. Untuk penempatan iklannya cukup fleksibel, asalkan kita tidak melanggar ketentuan layanan, publisher bisa berkreasi sesuai keinginan dan jangan lupa jangan sampai menempatkan iklan yang benar" mengganggu untuk pengunjung kalian.

Berbicara soal penempatan iklan, ada beberapa orang mengatakan bahwa iklan melayang tetap (sticky fixed ads) yang ditempatkan di paruh bawah layar memiliki nilai rasio klik yang cukup bagus. Karena secara kinerjanya, pengunjung blog akan terus melihat iklan tersebut meski laman discroll ke bawah atau ke atas sehingga memiliki potensi klik yang lebih besar.

Langkah - Langkah Pemasangan Iklan Melayang :

Langkah pertama yang perlu diperhatikan adalah memasang kode css-nya di bawah ini. Tempatkan kode tepat 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: 0;
  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> 

Jika sudah, sekarang kita perlu memasang kode iklannya agar bisa muncul di bawah layar secara tetap. Iklan ini nanti ada tombol close-nya sehingga pengunjung memiliki pilihan untuk menutup iklan tersebut atau tidak. Tempatkan kode di bawah ini tepat di atas tag penutup </body>, silakan dicopy paste: 

 <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 -->
<!-- 320x50 -->

<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
</div>
</b:if> 

Kode iklan adsense di letakkan di bawah keterangan <!– Kode iklan di tempatkan di sini –>. 

Catatan: 

Buatlah unit baru iklan adsense versi mobile dengan ukuran 320×50, agar iklannya terlihat rapi dan tidak menggangu pengunjung. Kodenya kemudian dipastekan pada posisi yang disediakan. 

Oke Mungkin itu saja yang bisa saya share kepada teman" bagaimana cara memasang iklan melayang di blog versi android/mobile.