Memasang Iklan Disamping Artikel Otomatis di Blogger

Table of contents

[Show]

 

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.

Berbagi :