Memasang Iklan Disamping Artikel Otomatis di Blogger

Table of Contents

 

Berikut adalah cara lengkap memasang iklan di samping artikel secara otomatis di Blogspot (Blogger), tanpa harus menempelkan iklan satu per satu ke setiap postingan:

---

🎯 Tujuan:

Menampilkan iklan (biasanya dari Google AdSense atau iklan banner lain) di sisi kanan atau kiri artikel, dan otomatis muncul di setiap postingan, tanpa diedit manual satu per satu.

---

🧰 Alat yang Dibutuhkan:

• Akun Google AdSense (atau iklan dari penyedia lain)

• Kode iklan (biasanya dalam bentuk JavaScript atau iframe)

• Akses ke template Blogspot (via Theme > Edit HTML)

---

🛠️ Langkah-langkah Memasang Iklan di Samping Artikel

1. Salin Kode Iklan

Masuk ke akun AdSense → pilih unit iklan → salin kode iklan (biasanya berformat seperti ini):

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

---

2. Masuk ke Blogger dan Buka Edit HTML

• Dashboard Blogger → Tema → klik panah ▼ di tombol "Sesuaikan" → Edit HTML

---

3. Cari Tag Artikel (Biasanya div class='post-body')

Tekan Ctrl + F lalu cari:

<b:includable id='post' ...>

atau

<div class='post-body' ...

---

4. Tambahkan Kode Iklan di Sebelah Artikel

Contoh:

<div style="display:flex;gap:20px;">
  <div style="flex:1;">
    <!-- Artikel tetap tampil di sini -->
    <div class='post-body entry-content' ...>
        <!-- isi artikel -->
    </div>
  </div>

  <div style="width:300px;">
    <!-- Iklan di samping artikel -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block;width:300px;height:250px"
         data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
         data-ad-slot="1234567890"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>
</div>

---

5. Simpan Tema dan Cek Hasilnya

Setelah memasang, klik Simpan dan lihat salah satu postingan. Iklan akan muncul di sebelah artikel secara otomatis.

---

🧠 Tips Tambahan:

• Pastikan kamu mematuhi kebijakan Google AdSense, jangan terlalu banyak unit iklan dalam satu tampilan.

• Gunakan CSS media queries agar iklan tidak tampil di layar kecil (HP), atau tampil di bawah artikel saja saat diakses mobile.

• Contoh CSS opsional:

@media screen and (max-width: 768px) {
  .iklan-samping {
    display: none;
  }
}

---

Kalau kamu mau, saya bisa bantu buatkan kode lengkap sesuai struktur template blog kamu — cukup kirim contoh template atau tautan blogmu. Mau saya bantu buatkan versi spesifiknya? jangan lupa share dan komen ya.