Cara Membuat Space Iklan Banner di Blogspot dengan CSS

Panduan mudah membuat space iklan banner di Blogspot menggunakan CSS, cocok untuk monetisasi blog yang sudah punya traffic.

Apa Itu Space Iklan Banner?

Kalau blog anda udah punya traffic yang lumayan, kenapa nggak coba dimonetisasi lewat space iklan banner? Gampangnya, ini adalah ruang di blog yang disewakan buat orang lain pasang iklan banner mereka. Bisa promosiin produk, jasa, atau website lain langsung ke pengunjung blog anda.

 

Kenapa Harus Pakai CSS?

Sebenarnya anda bisa aja pakai tabel HTML, tapi tampilannya sering berantakan kalau diakses lewat HP. Nah, pakai CSS itu lebih ringan, fleksibel, dan mobile friendly. Jadi, tampilan iklan tetap stabil di semua perangkat. Nggak bikin loading blog jadi berat juga.

 

Contoh Script Iklan Banner Blogspot

1. HTML Banner

Buka Notepad, lalu copy-paste kode HTML berikut ini:

<div class="Adsblock">
  <div class="Adsblock-right-top">
    <a href="https://example.com/link1">
      <img src="https://example.com/img1.gif" alt="Iklan 1" title="Iklan 1" />
    </a>
  </div>

  <div class="Adsblock-left-top">
    <a href="https://example.com/link2" target="_blank">
      <img src="https://example.com/img2.png" alt="Iklan 2" title="Iklan 2" />
    </a>
  </div>

  <div class="Clearadsblock"></div>

  <div class="Adsblock-right-bottom">
    <a href="https://example.com/link3">
      <img src="https://example.com/img3.gif" alt="Iklan 3" title="Iklan 3" />
    </a>
  </div>

  <div class="Adsblock-left-bottom">
    <a href="https://example.com/link4" target="_blank">
      <img src="https://example.com/img4.gif" alt="Iklan 4" title="Iklan 4" />
    </a>
  </div>
</div>

Jangan lupa ganti URL dan gambar dengan iklan yang anda inginkan.

2. CSS Styling

Login ke Blogger, masuk ke menu Rancangan → Edit HTML, cari kode ]]></b:skin>, lalu tempelkan CSS ini di atasnya:

.Adsblock {
  width: auto;
  height: auto;
  margin: 0px;
  text-align: center;
  padding: 5px;
}

.Adsblock-left-top,
.Adsblock-left-bottom,
.Adsblock-right-top,
.Adsblock-right-bottom {
  width: 150px;
  height: 150px;
}

.Adsblock-right-top,
.Adsblock-right-bottom {
  float: right;
}

.Clearadsblock {
  width: 100%;
  clear: both;
}

.Adsblock img {
  height: 150px;
  width: 150px;
  border: none;
}

 

Cara Memasang Banner di Sidebar Blog

Setelah semua siap, buka Layout → Tambah Gadget → HTML/JavaScript. Paste HTML banner tadi ke dalamnya, simpan, dan cek hasilnya di blog anda. Harusnya tampilannya udah rapi di desktop maupun HP.

 

Penutup

Nggak sulit, kan? Dengan space iklan banner, anda bisa mulai hasilin cuan dari blog tanpa ribet. Yang penting, pastikan blog anda punya konten berkualitas dan rutin update biar pengiklan makin tertarik.

Kalau belum berhasil, jangan nyerah! Coba ulangi langkah-langkahnya pelan-pelan. Dan kalau ada yang bingung, yuk diskusi bareng di kolom komentar!