Cara Memasang Iklan Adsense Di Antara Artikel Halaman Utama Blog

Blogger sebenarnya sudah menyediakan pengaturan untuk penempatan iklan Adsense di antara postingan artikel di halaman utama (homepage) blog, yakni melalui "Edit" di "Layout" (Tata Letak) pada bagian "Posting Blog". Namun kelemahan cara ini adalah kita tidak bisa sepenuhnya mengatur di bawah postingan artikel ke berapa iklan Adsense akan muncul karena iklan otomatis akan selalu muncul di bawah postingan artikel pertama, berapa pun jumlah (angka) yang kita pilih untuk pengaturan "tampilan iklan setelah sekian postingan artikel". Lagi pula, cara ini hanya tersedia jika kita mengubah pengaturan bahasa ke bahasa Inggris terlebih dahulu untuk memunculkan pilihan ini.

Untuk memasang iklan Adsense di antara postingan artikel di halaman utama blog, kita akan menyimpan kode-kode yang dibutuhkan di daerah <b:includable id='main' var='top'> yang biasanya akan tampak atau seperti berikut:

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

Untuk menampilkan iklan Adsense di antara postingan artikel di halaman utama blog, silahkan tambahkan kode index='x' pada kode <b:loop values='data:posts' var='post'> sehingga menjadi seperti berikut:

<b:loop values='data:posts' var='post' index='x'>

Kemudian gunakan kode berikut:

<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'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
</b:if>

Angka 1 artinya iklan akan muncul di bawah postingan artikel kedua, dan angka 3 berarti iklan akan muncul di bawah postingan artikel keempat. Jadi, angka-angka tersebut bisa disesuaikan untuk mengatur iklan Adsense yang akan muncul di antara postingan artikel blog.

Simpan kode di atas tepat di bawah 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>

Sehingga secara keseluruhan akan tampak seperti di bawah 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' 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'>Advertisement</span>
KODE IKLAN ADSENSE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Advertisement</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/>
</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>

Tambahkan juga kode CSS berikut ini untuk mengatur kata "Advertisement":
.post span.title-ads{font-size:16px;font-weight:bold;display:block;margin:10px 0}