Cara Membuat Iklan Adsense Melayang/Sticky Adsense/Popup Dibawah Blog

komputerdia.com - Adsense merupakan salah satu platform media periklanan raksasa yang dimiliki perusahaan Google, dimana saat ini adsense merupakan salah satu media periklanan yang banyak digunakan serta menjadi primadona blogger di seluruh dunia saat ini. Hampir semua website atau blog yang pernah kita kunjungi pasti menampilkan iklan adsense di homepage dan laman artikelnya. Dalam kesempatan ini saya akan mencoba menjelaskan bagaimana cara memasang iklan adsense popup (sticky adsense).

Pengertian Popup adalah suatu tampilan yang mengambang atau melayang pada suatu halaman, dimana letaknya berada di atas tampilan utama yang sedang aktif. Bila halaman Popup telah nampak biasanya halaman yang aktif tersebut akan secara otomatis didisable oleh program atau code yang telah di setting sehingga halaman tersebut terlihat samar-samar.

Jika melihat dari fungsionalnya, Popup berfungsi layaknya sebuah notifikasi atau pemberitahuan dan bahkan dibuat untuk melakukan activity oleh para pemilik property, seperti blog atau situs dengan tujuan tertentu untuk menghasilkan sesuatu dan popup tersebut merupakan halaman yang harus dipilih oleh user.

Namun jika kita lihat dari sisi lainnya, dengan popup juga sebuah aplikasi atau blog tidak perlu membubuhkan banyak menu untuk di eksplore oleh penggunanya, karena dengan adanya fitur ini tampilan situs atau blog yang kalian kelola akan menjadi lebih simpel dan tentunya berbeda dengan blog-blog lainnya

Setelah membahas apa itu pop-up, selanjutnya kita akan membahas Apa itu iklan popup melayang dibawah blog? Jenis iklan ini merupakan jenis iklan yang dipasang di bagian bawah screen layar ketika blog tersebut dibuka. Dalam kata lain iklan ini akan selalu muncul pada bagian bawah layar meskipun kondisi blog kalian scroll.

Iklan ini bisa menjadi alternatif ketika kalian sudah tidak mempunyai space atau slot iklan. Ada juga dari beberapa blogger yang menggunakan jenis iklan ini sebagai alat untuk memancing hasil pendapatan iklan agar lebih besar.

Dalam tutorial kali ini, saya akan menjelaskan bagaimana cara membuat iklan adsense melayang/sticky adsense atau iklan popup dibawah blog tanpa adanya tombol close.

Cara Membuat Iklan Melayang/Sticky Ads Dibawah Blog

A. Memasang Iklan Adsense Melayang dibawah Blog

• Langkah pertama silahkan kalian login ke akun blog yang akan dipasang jenis iklan melayang dbawah blog
• Masuk ke menu tema atau theme kemudian pilih menu edit html
• Setelah itu silahkan kalian kode </body> dengan menekan tombol CTRL + F dan ketikkan perintah </body>
• Salin dan tempelkan kode dibawah ini tepat diatas kode </body>

<div id="fixedban" style="-webkit-transform: translatez(0); bottom: 0; float: none; margin: auto; overflow: hidden; text-align: center; width: 100%; z-index: 999;">
<div style="display: block; height: auto; margin: auto; max-width: 728px; overflow: hidden; text-align: center;">
Letakkan Kode Iklan Disini
</div>
</div>

• Setelah itu silahkan kalian klik simpan, dan lihat hasilnya
• Jika penerapan berhasil maka kalian akan melihat tampulan seperti gambar dibawah ini

• Selesai dan semoga bermanfaat untuk kalian semuanya

B. Memasang Iklan Adsense Melayang Versi Mobile

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

• Artikel menarik lainnya bisa kalian baca
• Artikel menarik lainnya bisa kalian baca
• Artikel menarik lainnya bisa kalian baca
• Artikel menarik lainnya bisa kalian baca

Perlu kalian ketahui, bahwa jenis iklan ini hanya akan tampil jika pengunjung blog kalian mengakses blog menggunakan perangkat ponsel atau jika dilihat dari url browser terdapat kode m?=1 di akhir urlnya

• Langkah pertama silahkan kalian cari </head>
• Setelah itu tempatkan kode dibawah ini tept 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: 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>

• Setelah itu cari kode </body> dan tempatkan kode dibawah ini tepat 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 -->

Simpan Kode Iklan Disini
<!-- 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>

• Silahkan kalian simpan kode iklan adsense di bagian simpan kode iklan disini
• Agar iklan dapat ditampilkan dengan baik, silahkan kalian buat unit baru iklan adsense versi mobile dengan ukuran 320×50, agar iklannya terlihat rapi dan tidak menggangu pengunjung. 

Share this post