🔔 Aktifkan notifikasi disini Google News

Cara Pasang Iklan Vertikal 160 x 600 Pada Template Median UI 1.6

Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6
Saifulah.id
 - Pada tanggal 27 April 2022 saya memperkenalkan fitur baru Median UI yang saya beri nama Vertical Ads Median UI. Fitur ini berupa penambahan widget iklan vertikal di samping kiri postingan.


Apa itu Vertical Ads?

Vertical ads adalah iklan yang berbentuk vertikal dengan ukuran 160x600 yang memanjang ke bawah halaman. Iklan ini cocok di tampilkan pada mode Desktop karena sesuai lebar layar dan mudah di selipkan di antara postingan atau widget.

Mengapa kita butuh Vertical Ads?

Ada banyak alasan kita memerlukan iklan vertikal ini, diantaranya:
  1. Untuk menambah penghasilan Blog di akun Google Adsense
  2. Untuk memanfaatkan ruangan yang kosong agar berfungsi maksimal
  3. Bisa dimanfaatkan sebagai tempat menaruh link affiliasi bergambar

Mengapa harus iklan ukuran 160 x 600?

Jadi, keputusan untuk menambah iklan ukuran ini bukan tanpa dasar. Semuanya melalui survei panjang. Mulai dari pengalaman pribadi dan mengadopsi tampilan situs berita dan film.

Dimana hampir semua situs berita ternama dan populer selalu menggunakan iklan ukuran 160 x 600 di websitenya.

Butuh bukti? Coba perhatikan beberapa screenshot di bawah ini:

1. Tribunnews.com

Semua domain dan subdomain milik Tribunnews selalu menyematkan ikan vertikal. Mereka menaruh iklan 160x600 di kiri postingan.
Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6

2. Suara.com

Web berita Suara.com menampilkan 2 iklan vertikal di samping kiri dan kanan. Posisi ini juga banyak dilakukan oleh situs nonton film bioskop gratisan.
Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6


3. Kompas.com

Bayangkan, di saat Tribun News cuma pasang 1 iklan vertikal, Kompas malah pasang 3 vertical advertisment sekaligus. Mereka meletakkan iklan di kiri 2 buah dan kanan 1 buah.
Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6


Tampilan mana yang sebaiknya kita tiru?

Berhubung template Median UI 1.5 dan 1.6 tidak memiliki ruang kosong yang banyak, jadi kita meniru tampilan Tribun News saja. Lagipula untuk Blogger pemula, memasang iklan terlalu banyak bukanlah praktek terbaik. Karena bisa mengganggu pengunjung.

Cara Membuat Iklan Vertikal di Median UI 1.6

A. Pemasangan Iklan

  1. Buka Dashboard Blogger
  2. Pilih Tata Letak
  3. Tekan Tambahkan Gadget
    Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6

  4. Salin dan Tempel kode berikut di dalam kotak Konten
    <style scoped='' type='text/css'>
    .saifullah-leftSd,.saifullah-rightSd{position:fixed;top:68px;width:130px;height:600px;z-index:0;transform:translateZ(0)}
    .saifullah-leftSd{left:85px}
    .saifullah-rightSd{right:0}
    .close-fixedSd{position:absolute;width:160px;height:600px;line-height:600px;font-size:11px;font-weight:400;top:0px;left:0;text-align:center;background:#f6f6f6;border:1px solid #eee;color:#666;padding:5px 0;cursor:pointer}
    @media screen and (max-width:800px){.saifullah-leftSd,.saifullah-rightSd{display:none;visibility:hidden;}}
    </style>
    <div class="saifullah-leftSd">
    <div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
    Advertisement
    </div>
    <!-- Letakkan kode iklan di sini -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:160px;height:600px"
         data-ad-client="ca-pub-1234567890123456"
         data-ad-slot="1234567890"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>
  5. Keterangan:
    • Kode warna biru ganti dengan kata yang diinginkan (misal: iklan, promo, ads)
    • Kode warna kuning ganti dengan ID akun Adsense kalian
    • Kode warna pink ganti dengan kode Slot iklan
  6. Tekan Simpan
    Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6

B. Mengubah Ukuran Layout Template

Dikarenakan kita akan menambah widget yang tidak ada sebelumnya, jadi kita harus mengubah ukuran widget agar tercipta ruang kosong tempat iklan. Caranya simak tutorial di bawah ini:
  1. Buka Dashboard Blogger
  2. Pilih Tema
  3. Pilih Edit HTML
    Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6

  4. Lalu cari kode .blogCont .secIn
    Cara Menambahkan Iklan Vertikal 160 x 600 Pada Template Median UI 1.6

  5. Ganti kode berikut
    .blogCont .secIn{padding-left:25px;padding-right:25px}
  6. Menjadi seperti ini
    .blogCont .secIn{padding-left:180px;padding-right:25px}
  7. Simpan Tema

Bug Iklan Vertikal Saifullah.id

Berhubung pengetahuan saya dalam membuat dan mengedit kode terbatas, dikarenakan saya belajar semua secara otodidak, alias bukan mahasiswa programming. Jadi ada 1 bug (kelemahan) yang belum bisa saya atasi pada kode yang saya bagikan, dimana widget vertical ads tidak bisa mengikuti gerakan Main Menu saat di perkecil maupun diperlebar.

Jika kalian tahu cara mengatasinya, silakan bagikan melalui kolom komentar di bawah agar bisa menambah ilmu saya dalam memahami kode CSS, HTML, dan Javascript.

Demikian cara memasang ikan vertikal di Median UI versi terbaru. Semoga bermanfaat. Jangan lupa cek live demo melalui tombol di bawah.

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

11 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Kak, saya sudah mencobanya, namun iklan hanya muncul di Halaman Utama saja, di postingan tidak mau muncul.. kenapa ya Kak? Terima kasih
    1. Eh udah mas, data viewnya ternyata homepade saja.. wwkkwwk..
    2. Haha...
  2. Kode nya sudah berhasil diterapkan, tapi ada sedikit kendala saat tekan tombol navigasi, iklan nya jadi tertutup menu, iklannya tidak ikut geser ke kanan mengikuti postingan, ada solusi kah??
    Terimakasih
    1. Itu memang kelemahannya gan. Soalnya kodenya saya buat sendiri dengan pengetahuan seadanya. Sementara saya tidak pernah kuliah khusus di bidang programming. Semuanya otodidak, jadi masih belum nyampai ke ilmu cara membuat widget mengikuti widget lain.

      Kalau agan nemu caranya menyempurnakan kode di atas, mohon dibagikan ke saya juga 😊
  3. di template median ui 1.6 yang saya pake. menu "horizontal ad" nggak muncul karena apa kira kira ya mas?
    1. Horizontal ad itu yang mana maksudnya ya kak? Ada screenshotnya? Kirim gambar ke forum aja https://www.saifullah.id/p/forum.html
  4. mas. kalo versi 1.5 nggak bisa ya mas. saya cari kode .blogCont .secIn nggak nemu mas.
    1. Tutorial di atas untuk Median UI versi 1.6, kodenya beda dengan versi 1.5
    2. Ikutan nyimak gan untuk versi 1.5
      🙏🙏🙏
  5. Bang, kan ini template blogger, tapi kok Abang bisa di deploy sih atau di hosting gtu? Caranya g mana bang?
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.