Beranda
Blogger

Cara Memasang Banner Iklan AdSense Melayang Kiri Kanan

Salah satu metode penempatan iklan adsense yang jarang dipraktikkan oleh blogger publisher adsense adalah memasang iklan melayang di area kanan dan kiri halaman blog baik itu halaman hompe page maupun halaman konten postingan.

Banner iklan adsense melayang ini cocok untuk pengguna template blogger era terbaru saat ini dimana rata-rata template blog saat ini tampilannya tidak full layar, ada sekat kosong di kanan kiri dengan tujuan meringankan loading blog. Jika area kosong tersebut diisi dengan banner iklan tentunya sangatlah pas dan tampilan halaman blog akan terlihat lebih penuh dengan adanya banner iklan melayang di sisi kanan dan kiri halaman blog.

Banner Iklan melayang kanan dan kiri blog ini dilengkapi dengan tombol close sehingga memudahkan pengguna bagi yang merasa tidak nyaman untuk menclose iklan tersebut, dan juga mendukung template Amp dan Non-Amp serta hanya akan tampil pada browser dekstop saja. Sedangkan untuk tampilan device android iklan melayang ini akan hilang, karena jika dipaksakan tetap terlihat akan menutupi konten sehingga mengganggu kenyamanan pembaca.

Berikut ini tampilan Banner iklan melayang yang dapat anda coba terapkan, sebagai contoh saya menerapkannya pada blog In-Wepo template Amp  dengan type banner iklan affiliate.

Bagaimana setelah melihat screenshoot di atas apakah teman-teman merasa tertarik untuk mencobanya? jika iya silahkan ikuti prosedur pemasangan banner iklan melayang suport iklan affiliate dan adsense berikut ini:

Pemasangan Banner Iklan Pengguna Template AMP

Salin kode CSS berikut ini, dan letakkan area kode amp-custom di bawah kode <style> atau di atas kode </style>

 
.fixed-lside,.fixed-rside{
  position:fixed;top:60px;width:160px;height:600px;z-index:9999;
}
.fixed-lside{
  left:0;
}
.fixed-rside{
  right:0;
}
.close-fixedside{
  position:absolute;width:160px;height:15px;line-height:15px;font-family:Arial;font-size:10px;font-weight:400;top:-15px;left:0;text-align:center;background:#dedede;color:#333;cursor:pointer
}
@media screen and (max-width:800px){
  .fixed-lside,.fixed-rside{display:none;visibility:hidden;}
}

Untuk lebih jelasnya sebagai contoh perhatikan screenshoot penempatan kode berikut ini:

Letakkan kode dibawah <stylea amp-custom='amp-custom'> atau di atas kode </style>

Kemudian salin kode berikut ini, letakkan di bawah kode <body> atau atas kode </body>

Salin source kode banner iklan berikut ini, letakkan di area penempatan iklan seperti tampak pada screenshot di atas di bawah <!--Silahkan Simpan Kode Iklan di bawah ini-->

 
<div class="fixed-lside" id="fixed-lside">

<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" on="tap:fixed-lside.hide">
CLOSE ADS
</div>
<!-- Silah simpan kode iklan di bawah ini -->

</div>

<div class="fixed-rside" id="fixed-rside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" on="tap:fixed-rside.hide">
CLOSE ADS
</div>
<!-- Silah simpan kode iklan di bawah ini -->

</div>

Untuk source code iklan Adsense gunakan kode berikut ini, ganti id ca-pub dan slot iklan dengan id dan slot iklan anda.

 
  <amp-ad data-ad-client='ca-pub-xxxxxxxxxxx' data-ad-slot='xxxxxxxxx' height='600' media='(min-width: 801px)' type='adsense' width='160'/>

Dan untuk source code iklan affiliate atau iklan manual lainnya gunakan kode berikut ini:

 
  <a aria-label='Glints' href='url affiliate disini' rel='nofollow noopener' target='_blank' title='DomaiNesia'><amp-img alt='Glints' height='160' width='600' src='url source banner iklan disini' title=' Glints'/></a>

Hasil dari penerapan banner iklan melayang  kanan dan kiri halaman blog seperti tampak pada screenshot berikut ini:

Tampilan Banner Iklan Melayang pada halaman home page dan Konten Postingan

Pemasangan Banner Iklan Pengguna Template Non-Amp

Salin kode berikut ini, kemudian letakkan kode pada widget tata letak, buat widget baru pilih jenis HTML/Javascript kemudian pastekan kode pada area konten, klik sampan, kemudian klick simpan setelan untuk penerapannya.

 
  <style>
.fixed-lside,.fixed-rside{
  position:fixed;top:60px;width:160px;height:600px;z-index:9999;
}
.fixed-lside{
  left:0;
}
.fixed-rside{
  right:0;
}
.close-fixedside{
  position:absolute;width:160px;height:15px;line-height:15px;font-family:Arial;font-size:10px;font-weight:400;top:-15px;left:0;text-align:center;background:#dedede;color:#333;cursor:pointer
}
@media screen and (max-width:800px){
  .fixed-lside,.fixed-rside{display:none;visibility:hidden;}
}
</style>

<div class="fixed-lside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Silah simpan kode iklan di bawah ini -->

</div>

<div class="fixed-rside">
<div aria-label="Close Ads" class="close-fixedside" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Silah simpan kode iklan di bawah ini -->

</div>
Source kode Banner iklan melayang diambil dari KompiAjaib.com karya Bang Adhy Suryadi

Terima kasih telah berkunjung, semoga dengan menerapkan metode penempatan banner iklan melayang di atas dapat meningkatkan pendapatan klick iklan adsense.


Ingin berlangganan Notifikasi Update Postingan Terbaru? Silahkan Gabung Berbagi Tutorial Online WhatsApp Grup atau Follow Berbagi Tutorial On Google News. Yuk...Subscribe Channel Youtube Berbagi Tutorial Online bagi Kalian yang suka dengan Tutorial dalam bentuk Rekaman Video.

Posting Komentar