Cara Mengatur Posisi Iklan Adsense Yang Tampil Di Halaman Utama Blog

Google sebenarnya sudah memberikan tempat khusus untuk mengatur letak iklan Adsense pada menu Tata Letak yang berada dalam CPanel
masing-masing blog.

Pada menu Tata Letak ini, kamu bisa menambahkan beberapa widget dan berguna untuk mengatur posisi letak dari setiap widget yang kamu punya termasuk Widget iklan Adsense.

Kamu bisa mengatur jumlah iklan dan posisi iklan agar muncul diantara postingan pada halaman utama blog kamu kamu.



Untuk mengatur iklan adsense melalui tata letak, pengaturan yang diberikan oleh google memang terbatas dan seadanya. Karena kita tidak bisa mengatur posisi sesuai keinginan kita.

Seperti pada contoh kasus yang saya alami beberapa waktu lalu, saya hanya bisa menampilkan iklan adsense dibawah artikel ke-1 dan dibawah artikel ke-6.

Karena keterbatasan menu pada pengaturan yang diberikan google pada widget iklan adsense, saya berhasil mendapatkan trik untuk menampilkan iklan adsense pada Halaman Utama blog yang bisa diletakkan sesuai keinginan kita.

Untuk mengatur bentuk postingan, baik berbentuk Grid ataupun List di halaman hompage, biasanya akan menggunakan Class Post (.Post).

Dengan menggunakan class post itu juga kita akan gunakan untuk letak iklan agar tampilannya sama dengan tampilan artikel pada homepage.

Untuk menampilkan iklan adsense di antara artikel yang tampil pada homepage blog kita, maka kita akan menyimpan kode iklan adsense ini di daerah <b:includable id='main' var='top'> yang biasanya akan tampil seperti dibawah ini.

<b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>

</b:includable>

Nah, Untuk menampilkan iklannya, kita gunakan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>

Setelah itu, mari kita atur letak iklan agar tampil sesuai keinginan.

Tampil Sebelum Artikel Pertama

Simpan Kode Iklan yang sudah diberikan diatas, dan letakkan kode iklan tepat dibawah kode <b:include data='top' name='status-message'/>

Tampil Di Bawah Artikel Terakhir

Simpan Kode Iklan dan letakkan tepat dibawah kode ini
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>

Tampil Di Antara Artikel

Menurut Tutorial yang saya dapat setelah googling. Untuk menampilkan iklan adsense di antara postingan, silahkan tambahkan kode index='x' pada kode <b:loop values='data:posts' var='post'>. Maka hasilnya akan seperti kode dibawah ini.
<b:loop values='data:posts' var='post' index='x'>

Baca juga : Kebijakan & Batasan Bagi Pengguna Blog

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>

<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>

Angka 1 yang sudah ditandai pada kode iklan diatas, berarti iklan akan ditampilkan dibawah artikel pertama.

Dan angka 3 yang sudah ditandai pada kode iklan diatas, berarti iklan akan ditampilkan dibawah artikel keempat.

Selanjutnya silahkan kamu atur posisi iklan sesuai keinginan kamu agar homepage blog kamu tampil lebih rapih.

Untuk selanjutnya, silahkan kamu simpan "Kode Iklan 2" tepat dibawah kode berikut ini.

<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>

Untuk mengatur tulisan "Sponsor" agar bisa disesuaikan dengan template yang sedang kamu gunakan, silahkan sisipkan kode CSS dibawah ini.

.post span.title-ads{font-size:16px;font-weight:bold;display:block;margin:10px 0}

Untuk melihat hasil kode yang sudah diedit tadi secara lengkap, silahkan gunakan tombol dibawah ini untuk membuka hasil editing kode secara menyeluruh.

<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post' index='x'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-posts&quot;&gt;
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==9'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
</b:loop>
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Sponsor</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>

<b:else/>
<b:include name='mobile-main'/>
</b:if>

<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
</b:if>

</b:includable>

Demikian Tutorial yang saya dapat kali ini tentang Cara Mengatur Posisi Iklan Adsense Yang Tampil Di Halaman Utama Blog,
Semoga tutorial kali ini mudah dimengerti yah teman-teman.

Sumber