System
Home  ›  Blog  ›  Widget

Cara Pasang Slot Iklan Baru diatas Header Blog

"Cara pasang slot iklan baru di atas header, apakah sobat ingin memasang spot banner untuk iklan diatas header Blog? bisa meningkatkan CTR lho!"

3 min read 18 komentar

Cara pasang slot iklan baru di atas header, apakah sobat ingin memasang spot banner untuk iklan diatas header Blog kalian?

Untuk melihat tampilan Demo kalian bisa lihat diatas header blog ini dalam tiap postingan artikel. Atau silahkan lihat.

DEMO.

Terdapat slot iklan baru diatas Header, yang muncul dan dapat menyesuaikan lebar tampilan desktop maupun mobile.

Cara Memasang Iklan diatas Header Blog

Iklan Billboard Besar diatas Header Ala Web Berita

Beberapa situs portal berita cukup banyak yang telah menerapkan posisi banner ini dalam websitenya.

Baik dalam tampilan desktop maupun ada juga yang hanya muncul di tampilan mobile saja.

Dalam tampilan desktop banner iklan yang tampil biasanya besar dan lebar (jenis billboard), jika tampilan mobile berbentuk kotak menyesuaikan lebar layar.

Nah kali ini CatatanDroid akan membagikan tutorialnya yang dapat diterapkan untuk platform Blogger dan tampil di halaman postingan saja.

Dapat meningkatkan CTR

Kenapa hanya muncul di halaman post artikel saja? Salah satu alasan utama tentunya agar tidak memberatkan url root/home blog.

Selain itu halaman yang lebih banyak dikunjungi oleh pengunjung organik baru tentu adalah halaman postingan bukan?

Sehingga diharapkan CPM dan CTR iklan Adsense dan/atau penyedia Advertiser lain akan meningkat. Semoga ya!

Daripada berlama-lama lagi yuk disimak tutorialnya! 

DEMO

Dalam praktek tutorial kali ini CatatanDroid menggunakan template Linkmagz dari Mas Sugeng.

Cara pasang slot iklan baru diatas Header Blog

  1. Buka dan login ke akun Blogger kalian
  2. Buka halaman Template
  3. Klik icon kebawah disamping tombol Customize
  4. Pilih Edit HTML
  5. Cari (ctrl+f)
    <header id='header-outer'>
  6. Kemudian copas kode ini tepat dibawah <header id='header-outer'>
    <b:section class='iklanatasheader' id='iklanatasheader' maxwidgets='1' showaddelement='no'>
        <b:widget cond='data:view.isPost' id='HTML366' locked='true' title='' type='HTML' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='content'>
    &lt;div style=&quot;padding-bottom:5px;text-align:center;background-color:#eeeeee;&quot;&gt;
    Paste Kode Iklan Disini
    &lt;/div&gt;</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
            <b:if cond='data:content'>
                <b:if cond='data:title'>
                    <div class='normalwidget-title html'>
                        <h2 class='title'><data:title/></h2>
                    </div>
                </b:if>
                <div class='widget-content'>
                    <data:content/>
                </div>
            </b:if>
        </b:includable>
        </b:widget>
      </b:section>
  7. Simpan template

Pasang kode iklan

  1. Sekarang buka halaman Layout
  2. Edit kotak HTML baru yang muncul
  3. Masukan/copas kode iklan Google Adsense maupun penyedia iklan lain
  4. Disarankan pasang banner iklan type Responsive
  5. Save dan lihat hasilnya

Iklan muncul juga di Home (Optional)

  1. Buka halaman Template
  2. Klik icon kebawah disamping tombol Customize
  3. Pilih Edit HTML
  4. Klik icon widget > Pilih HTML366
  5. Perhatikan kode cond='data:view.isPost' ganti dengan kode berikut ini
    cond='data:view.isPost or data:view.isHomepage'
  6. Simpan template

Iklan hanya muncul di tampilan mobile (Optional)

  • Ganti kode cond='data:view.isPost' diatas dengan kode berikut
    cond='data:blog.isMobileRequest'

Penutup dan Kesimpulan

Demikian sedikit artikel tutorial tips blog dari CatatanDroid tentang cara menambah slot iklan baru diatas header.

Disarankan untuk memasang kode banner iklan berjenis responsive agar dapat menyesuaikan tampilan desktop maupun mobile.

Jika pengunjung membuka dengan perangkat desktop maka tampilan iklan akan menjadi lebar/iklan billboard.

Jika pengunjung dengan perangkat mobile tampilan iklan akan berbentuk banner kotak.

Semoga bermanfaat jika ada pertanyaan terkait tutorial ini silahkan kirim komentar dibawah. Terima kasih dan selamat mencoba! CatatanDroid

18 komentar

Harap berkomentar yang sopan dan sesuai pembahasan artikel, jika mengirimkan spam link maka komentar akan dimoderasi. Terima kasih

  1. Buat tutor first image artikel nya mas🙏

    BalasHapus
    Balasan
    1. Siap, sudah banyak juga tutor first image mas nanti saya coba juga reshare di sini.

      Hapus
    2. Iya mas, yang seperti punya mas ini. Tampilannya keren banget soalnya

      Hapus
    3. Siap, terima kasih ya. 😀

      Hapus
    4. oke mas. Ditunggu tutornya ya🙏

      Hapus
    5. Sudah rilis tutorialnya ya mas. Silahkan dicoba.
      https://www.catatandroid.com/2021/07/cara-first-image-cover-artikel-blog.html

      Hapus
  2. Websitenya keren, tapi iklanmu gak bagus bang

    BalasHapus
    Balasan
    1. Terima kasih, saya memang memasang iklan dari adsterra dan pengaturan iklannya agak ngaco.
      kalau boleh tau yang muncul iklan tentang apa bg?

      Hapus
    2. Ikan tentang video dewasa mas, ini kurang bagus menurut saya untuk website sebagus ini

      Hapus
    3. Terima kasih banyak mas sementara sudah saya nonaktifkan, padahal saya sudah atur pengaturan nonaktifkan iklan dewasa tapi tetap saja muncul. aneh adsterra.

      Hapus
    4. sama mas, saya pake ads terra dulu juga gitu iklan popup nya, tapi kalo iklan banner baru sesuai dengan kategori iklan, kenapa gak masang banner adsterra bang

      Hapus
    5. alasan ga pakai banner hanya socialbar karena sebelumnya saya pernah coba beberapa jenis iklannya termasuk banner, dan sepertinya penghasilan paling besar dari socialbar.

      Hapus
  3. Nah tuh ada AdSense mas, kenapa make adsterra 🗿

    BalasHapus
    Balasan
    1. Adsensenya sedang terkena pembatasan jadi kadang muncul kadang tidak. haha

      Hapus
    2. lah sama, tapi aku baru kemaren pulih

      Hapus
    3. wah selamat. saya masih belum hilang notifnya udah mau sebulan.

      Hapus
  4. Bang mau tanya lagi, Iklan diatas header ini aku pasang iklan ukuran 300 × 600. Giamana caranya agar widget ini cuma muncul di mobile only, kalo desktop only gak muncul

    BalasHapus
    Balasan
    1. sudah diberikan alternatif pada headings 5.
      ganti tag conditionalnya jadi data:blog.isMobileRequest

      Hapus