Cara Mempercantik Iklan Adsterra Agar Tampil Elegan Seperti Google AdSense

Table of Contents

Lintasiana.com — mempercantik tampilan iklan adsterra supaya tidak kaku.

Jujur saja, dulu saya sangat senang saat pertama kali memasang iklan Adsterra di blog saya. Penghasilan mulai masuk, pilihan formatnya banyak, dan pendaftarannya pun mudah. Tapi begitu kode iklan itu tayang di halaman, rasa senang itu berubah jadi kecewa. Tampilannya… bagaimana ya mengatakannya? Terasa sangat kaku, kasar, dan “mentah”.

Tanpa bingkai yang rapi, tanpa jarak yang pas, iklan itu terlihat seperti menempel paksa ke dalam tulisan artikel. Kadang pinggirannya terpotong, kadang ukurannya melar tidak karuan di layar ponsel, dan tidak ada tanda jelas yang menyatakan itu sebagai iklan. Padahal kalau kita melihat iklan dari Google AdSense, tampilannya begitu rapi: ada garis tipis yang elegan, sudut yang sedikit melengkung, bayangan yang lembut, dan tulisan kecil “Iklan” yang membuatnya terlihat profesional dan terpercaya.

Berbulan‑bulan saya memendam keluh kesah ini. Saya berpikir: “Apakah tampilan Adsterra memang harus begini saja? Apakah tidak bisa diubah agar lebih enak dipandang?” Saya tidak mau blog yang sudah saya bangun susah payah terlihat berantakan hanya karena format iklan yang tidak diatur dengan baik. Pengunjung mungkin tidak berkomentar, tapi mata mereka pasti merasakan ketidaknyamanan itu.

Hingga akhirnya saya duduk tenang, mencoba memahami struktur kode yang diberikan, dan menyadari satu hal penting: kode iklan hanyalah isinya, sedangkan kita yang menentukan wadahnya. Kita bisa membungkusnya dengan gaya yang kita inginkan, tanpa mengubah kode asli sedikitpun—sehingga pendapatan tetap aman 100%.

Setelah mencoba berulang kali dan menyesuaikan ukuran agar pas di komputer maupun HP, akhirnya saya menemukan cara paling tepat. Hasilnya? Iklan Adsterra milik saya kini tampilannya sama halus, rapi, dan elegan seperti Google AdSense.

Masalah Utama: Mengapa Tampilan Bawaan Adsterra Terasa Kaku?

Kode iklan asli yang diberikan oleh pihak Adsterra memang fungsional, tapi ia hanya memuat elemen iklan itu sendiri. Ia tidak memiliki pengaturan tampilan tambahan seperti jarak aman, garis pembatas, sudut membulat, label yang jelas, dan penyesuaian otomatis di ponsel—hal‑hal kecil yang membuat tampilan terasa profesional.

Solusi: Membungkus Iklan dengan Gaya Elegan

Prinsipnya sederhana: kita buat wadah pembungkus yang meniru gaya AdSense, pas ukuran asli di layar besar & melebar sempurna di HP. Berikut kode siap pakai untuk berbagai jenis iklan:

✅ 1. Iklan Spanduk 728 × 90

Kode Siap Pakai:

<style>
.wadah-adsterra-728{margin:20px auto;padding:12px;background:#fff;border:1px solid #e8eaed;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);display:table;width:auto;max-width:100%;transition:all .25s ease}
.wadah-adsterra-728:hover{border-color:#dadce0;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.label-iklan{display:block;font-size:11px;color:#70757a;margin-bottom:6px;font-family:system-ui,sans-serif;text-align:left}
.isi-728{width:728px;height:90px}
.isi-728 iframe{width:100%;height:100%;border:none;display:block}
@media (max-width:740px){.wadah-adsterra-728{width:100%!important;margin:15px 0}.isi-728{width:100%;aspect-ratio:728/90;height:auto}}
</style>
<div class="wadah-adsterra-728">
  <span class="label-iklan">Iklan</span>
  <div class="isi-728">
    <script>atOptions={'key':'16f5a849eb616dd2a5060673c109020f','format':'iframe','height':90,'width':728,'params':{}};</script>
    <script src="https://www.highperformanceformat.com/16f5a849eb616dd2a5060673c109020f/invoke.js"></script>
  </div>
</div>

✅ 2. Iklan Kotak 300 × 250

Kode Siap Pakai:

<style>
.wadah-adsterra-300{margin:20px auto;padding:12px;background:#fff;border:1px solid #e8eaed;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);display:table;width:auto;max-width:100%;transition:all .25s ease}
.wadah-adsterra-300:hover{border-color:#dadce0;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.label-iklan{display:block;font-size:11px;color:#70757a;margin-bottom:6px;font-family:system-ui,sans-serif;text-align:left}
.isi-300{width:300px;height:250px}
.isi-300 iframe{width:100%;height:100%;border:none;display:block}
@media (max-width:340px){.wadah-adsterra-300{width:100%!important;margin:15px 0}.isi-300{width:100%;aspect-ratio:300/250;height:auto}}
</style>
<div class="wadah-adsterra-300">
  <span class="label-iklan">Iklan</span>
  <div class="isi-300">
    <script>atOptions={'key':'ac912ef698f58ceeddc890d980784c50','format':'iframe','height':250,'width':300,'params':{}};</script>
    <script src="https://www.highperformanceformat.com/ac912ef698f58ceeddc890d980784c50/invoke.js"></script>
  </div>
</div>

✅ 3. Iklan Native / Rekomendasi Artikel

Kode Siap Pakai:

<style>
.wadah-adsterra-native{margin:22px auto;padding:14px 16px;background:#fff;border:1px solid #e8eaed;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,0.05);display:table;width:auto;max-width:100%;transition:all .25s ease}
.wadah-adsterra-native:hover{border-color:#e0e0e0;box-shadow:0 2px 10px rgba(0,0,0,0.07)}
.label-native{display:block;font-size:11px;color:#70757a;margin-bottom:8px;font-family:system-ui,'Segoe UI',Roboto,sans-serif;text-align:left;letter-spacing:.3px}
.isi-native{width:100%}
.isi-native iframe,.isi-native ins,.isi-native div{border:none!important;display:block!important;margin:0!important;max-width:100%!important;width:100%!important}
@media (max-width:750px){.wadah-adsterra-native{width:100%!important;margin:18px 0;padding:12px}}
</style>
<div class="wadah-adsterra-native">
  <span class="label-native">Iklan yang disarankan</span>
  <div class="isi-native">
    <script src="https://pl30654446.effectivecpmnetwork.com/75/c0/2b/75c02b14e855cf888e0a5d943ba1aa15.js"></script>
  </div>
</div>

✅ 4. Iklan Format Wadah Container

Kode Siap Pakai:

<style>
.wadah-adsterra-box{margin:20px auto;padding:12px;background:#fff;border:1px solid #e8eaed;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);display:table;width:auto;max-width:100%;transition:all .25s ease}
.wadah-adsterra-box:hover{border-color:#dadce0;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.label-iklan{display:block;font-size:11px;color:#70757a;margin-bottom:6px;font-family:system-ui,sans-serif;text-align:left}
.isi-box{width:100%}
.isi-box iframe,.isi-box ins,.isi-box div{border:none!important;display:block!important;margin:0!important;max-width:100%!important}
@media (max-width:750px){.wadah-adsterra-box{width:100%!important;margin:15px 0}}
</style>
<div class="wadah-adsterra-box">
  <span class="label-iklan">Iklan</span>
  <div class="isi-box">
    <script async="async" data-cfasync="false" src="https://pl30654441.effectivecpmnetwork.com/cd5f8080f92325e747182d1934bf2e60/invoke.js"></script>
    <div id="container-cd5f8080f92325e747182d1934bf2e60"></div>
  </div>
</div>

⚠️ Catatan Penting: Ganti kunci atau alamat kode iklan di atas dengan milik akun kamu sendiri, agar pendapatan masuk ke akun kamu, bukan contoh ini.

Apa yang Berubah Setelah Memakai Cara Ini?

• Tampilan Lebih Profesional: Iklan tidak lagi terlihat berantakan, melainkan elemen yang terencana.
• Ukuran Selalu Pas: Di komputer pas persis iklan, di HP otomatis menyesuaikan layar.
• Lebih Jelas & Terpercaya: Adanya label “Iklan” membuat pengunjung nyaman dan jujur.
• Pendapatan Tetap Aman: Kita hanya membungkus, isi kode iklan tidak diubah sedikitpun.

Cara Memasangnya di Blogger

Sangat mudah: Masuk ke Dasbor Blogger → Tata Letak → Tambah Gadget HTML/JavaScript → Tempel kode di sana, atau tempel langsung di dalam artikel lewat mode HTML. Jangan lupa ganti kode iklan contoh dengan milikmu.

Penutup

Sebagai pemilik blog, kita bekerja keras membuat konten—sudah sepantasnya tampilan kita juga rapi dan berkelas. Sekarang blog saya tidak beda jauh dari situs besar meski pakai Adsterra. Masalah yang membuat saya gelisah akhirnya terpecahkan hanya dengan kode sederhana namun bermakna besar. Semoga bermanfaat dan rezeki kita semakin lancar!