Cara Membuat Iklan Melayang di Blog

Cara Membuat Iklan Melayang/Floating Ads Responsive dengan Tombol Close

Malestea
By Malestea
8
Cara Membuat Iklan Melayang di Blog

Cara Membuat Iklan Melayang di Blog

Cara Membuat Iklan Melayang/Floating Ads Responsive dengan Tombol Close

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Cara Membuat iklan Melayang Di Samping Kiri Dan Kanan Blog" seperti yang kita ketahui bahwa iklan sangat diperlukan disebuah web/blog untuk mendapatkan penghasilan untuk sang creator (admin) dan tentu ada beberapa space kosong yang bisa kita tambahkan dengan sedikit hiasan. Sepeti di pembahasan kali ini saya akan bagikan cara untuk membuat Floating Ads diblog.

Cara Membuat Iklan Melayang di Blog

Floating Ads ini akan berada pada posisi kiri dan kanan blog, sehingga tidak akan mengganggu atau menghalangi isi konten pada blog Kita dan slot iklan hanya akan tampil pada tampilan mode Dekstop saja sedangkan untuk mode Mobile dihilangkan sebab tidak responsive dan berakibat menghalangi konten. Dengan menambahkan Floating Ads ini dapat memaksimalkan pendapatan kita khususnya untuk blog yang sudah menambahkan iklan Adsense kecuali admin blog ini blm ada iklanya sob 😭

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

1. Buka Blogger

2. Klik menu Tata Letak > Klik "Tambahkan Gadget"

3. Kemudian tambahkan kode berikut pada widget yang baru saja dibuat

<style scoped='' type='text/css'>
.fixed-leftSd,.fixed-rightSd{position:fixed;top:60px;width:160px;height:600px;z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:0}
.fixed-rightSd{right:0}
.close-fixedSd{position:absolute;width:160px;height:15px;line-height:15px;font-size:11px;font-weight:400;top:-15px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}
@media screen and (max-width:800px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}
</style>
<div class="fixed-leftSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Simpan kode iklan di sini -->
</div>
<div class="fixed-rightSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
CLOSE ADS
</div>
<!-- Simpan kode iklan di sini -->
</div>

4. Klik Simpan

5. Selesai dan lihat hasilnya


Note: Gunakan unit iklan dinamis 160x600 px atau unit iklan vertikal pada AdSense. Jangan lupa tambahkan kode iklanya pada kode yang ditandai merah.

Hasilnya akan terlihat seperti berikut, supaya lebih jelas ganti ke ukuran 0.25x

See the Pen Create Floating Ads Left and Right in Blog by Koderian (@koderian) on CodePen.

Bagaimana hasilnya ? pastinya sama dengan yang di "Artikel" ini yahh :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#

Malestea

Kota: Bandung, Pasirkoja - Kabupaten bandung.

8 comments

  1. Mayuf
    Mantap sob tutorilanya sangat bermanfaat
    • Malestea
      sankyu sob, jangan lupa dicoba heeh
  2. Meok News
    Mantab gan dan sangat bermanfaat
    • Malestea
      wokeh gan, moga bermanfaat buat iklanya
  3. Andre Stiadi
    Nice gan
    • Malestea
      sama sama sob
  4. Dwi Ari wijaya
    Keren blog nyA bang
    • Malestea
      makasih sob