SORBANSANTRI.COM

Catatan Pemasangan Iklan, Banner, dan Parallax

Dokumen ini untuk acuan mengatur banner/iklan portal Sorban Santri dari WordPress backend.

Backend WordPress

Alamat backend:

https://wp.sorbansantri.com/wp-admin

Sebagian besar banner diambil dari Media Library WordPress berdasarkan judul media. Jadi saat upload gambar, judul media harus sesuai nama slot di bawah.

Alur umum:

  1. Masuk ke WordPress admin.
  2. Buka Media > Library.
  3. Upload gambar banner.
  4. Klik gambar yang sudah diupload.
  5. Isi Title/Judul sesuai nama slot.
  6. Jika banner perlu link, isi URL di bagian Caption/Keterangan.
  7. Simpan/perbarui.

Catatan:

  • Judul media harus sama persis.
  • Caption dipakai sebagai link tujuan banner.
  • Jika slot belum ditemukan, frontend akan memakai fallback bawaan.
  • Setelah update, tunggu cache/revalidate sekitar 2-5 menit, atau redeploy jika perlu.

Slot Banner Utama

1. Banner Atas Homepage

Judul media:

portal-home-banner

Lokasi tampil:

  • Homepage, bagian atas setelah breaking news.

Ukuran ideal:

970 x 250 px

Fungsi:

  • Banner utama besar.
  • Cocok untuk iklan horizontal, sponsor, promosi utama.

Jika ingin banner bisa diklik:

  • Isi Caption dengan URL tujuan, contoh:
https://virtualserver.work

2. Banner Inline Homepage

Judul media:

portal-inline-banner

Lokasi tampil:

  • Area homepage di antara section berita.

Ukuran ideal:

374 x 112 px

Fungsi:

  • Iklan kecil/menengah di dalam alur konten homepage.

3. Banner Sidebar

Judul media:

portal-sidebar-banner

Lokasi tampil:

  • Sidebar homepage.
  • Sidebar single post.

Ukuran ideal:

300 x 250 px

atau:

320 x 270 px

Fungsi:

  • Iklan kotak di sisi artikel atau homepage.
  • Cocok untuk iklan produk/jasa.

Iklan Sticky Desktop Kanan dan Kiri

Iklan ini hanya tampil di desktop lebar.

4. Sticky Kiri Desktop

Judul media:

portal-side-left-banner

Lokasi tampil:

  • Sisi kiri layar desktop.
  • Sticky saat user scroll.

Ukuran ideal:

160 x 620 px

atau:

150 x 600 px

5. Sticky Kanan Desktop

Judul media:

portal-side-right-banner

Lokasi tampil:

  • Sisi kanan layar desktop.
  • Sticky saat user scroll.

Ukuran ideal:

160 x 620 px

atau:

150 x 600 px

Catatan:

  • Slot kanan dan kiri baru tampil pada layar desktop besar.
  • Di laptop kecil bisa tidak tampil agar tidak mengganggu konten.
  • Jika ingin memberi link, isi Caption dengan URL tujuan.

Parallax Mobile

Parallax hanya untuk tampilan ponsel dan posisinya di atas header.

6. Parallax dari Media

Judul media:

portal-parallax-banner

Lokasi tampil:

  • Homepage mobile.
  • Single post mobile.
  • Posisi di atas header.

Ukuran ideal:

325 x 300 px

atau:

650 x 600 px

Fungsi:

  • Iklan visual besar di atas header pada ponsel.
  • Header tetap sticky saat discroll.

Jika ingin link:

  • Isi Caption dengan URL tujuan.

7. Parallax dari Halaman WordPress

Jika ingin isi parallax berupa kode HTML, iframe, atau gambar custom, buat halaman WordPress:

Slug halaman:

portal-parallax-ad

Alur:

  1. Buka Pages > Add New.
  2. Buat judul bebas, contoh: Portal Parallax Ad.
  3. Pastikan slug/permalink menjadi:

portal-parallax-ad

  1. Isi konten halaman dengan HTML/gambar/iframe.
  2. Publish.

Catatan penting:

  • Konten halaman ini dipakai sebagai parallax slot mobile.
  • HTML sederhana seperti gambar, link, dan iframe bisa dipakai.
  • Script tag mentah biasanya tidak otomatis berjalan di React/Next.js.
  • Untuk kode iklan pihak ketiga, lebih aman gunakan iframe atau embed HTML yang tidak butuh script manual.

Breaking News

Breaking news mengambil berita dari WordPress post terbaru.

Lokasi tampil:

  • Desktop: bar breaking news di bawah menu/header.
  • Mobile: sticky breaking news thumbnail berjalan di bawah layar.

Tidak perlu membuat banner khusus.

Cara mengatur isi:

  • Publish/update post di WordPress.
  • Post terbaru akan ikut tampil di breaking news.

Catatan:

  • Mobile sticky breaking news otomatis memakai gambar featured image dan judul post.
  • Jika featured image kosong, frontend memakai gambar fallback.

Menu dan Kategori

Menu kategori diambil dari WordPress Categories.

Cara mengatur:

  1. Masuk WordPress admin.
  2. Buka Posts > Categories.
  3. Buat atau edit kategori.
  4. Pastikan kategori memiliki post.

Catatan:

  • Kategori kosong bisa tidak tampil.
  • Urutan menu mengikuti kategori yang tersedia dari WordPress dan fallback bawaan.
  • Untuk struktur homepage kategori, isi post per kategori agar layout terlihat variatif.

Rekomendasi Ukuran Cepat

portal-home-banner 970 x 250 portal-inline-banner 374 x 112 portal-sidebar-banner 300 x 250 / 320 x 270 portal-side-left-banner 150 x 600 / 160 x 620 portal-side-right-banner 150 x 600 / 160 x 620 portal-parallax-banner 325 x 300 / 650 x 600

Contoh Pengisian Caption Link

Jika ingin banner mengarah ke Banyu Cloud Server:

https://virtualserver.work

Jika tidak ingin banner bisa diklik:

Kosongkan Caption

Checklist Setelah Upload Banner

  1. Judul media sudah sesuai nama slot.
  2. Gambar ukurannya sesuai rekomendasi.
  3. Caption sudah diisi jika perlu link.
  4. Featured image post sudah terisi untuk breaking news dan slider.
  5. Cek tampilan desktop dan mobile.
  6. Tunggu cache 2-5 menit jika perubahan belum langsung muncul.