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!"

YZG 30 Agustus

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.

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

Buka dan login ke akun Blogger kalian
Buka halaman Template
Klik icon kebawah disamping tombol Customize
Pilih Edit HTML
Cari (ctrl+f)
```
<header id='header-outer'>
```

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>

Simpan template

Pasang kode iklan

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

Iklan muncul juga di Home (Optional)

Buka halaman Template
Klik icon kebawah disamping tombol Customize
Pilih Edit HTML
Klik icon widget > Pilih HTML366
Perhatikan kode cond='data:view.isPost' ganti dengan kode berikut ini
```
cond='data:view.isPost or data:view.isHomepage'
```
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