Cara Meletakkan Adsense di Antara Postingan Homepage Blogspot

Cara meletakkan Adsense di antara postingan Homepage Blogspot. Blog Kang Sodikin ini, di hompage-nya nampak barisan posting. Posting-posting atau artikel tersebut ditampilakn dalam format grid. Ditata urut seperti halnya orang nata keramik.

Nah, di antara posting-posting di Homepage tersebut, saya ingin meletakkan beberapa adsense. Sehingga keberadaan adsese tidak hanya di Top Banner. Bingung caranya dan tidak tahu. Browsing sana-sini akhirnya ketemu di KompiAjaib-nya Kang Adhy Suryadi, yang dalam beberapa blog saya yang lain juga menggunakan template blogspot buatannya. Bahkan saya punya 3 template bikinan dia.


Dalam blogspot sebenarnya sudah disediakan fasilitas untuk mengatur adsense di sela-sela postingan halaman depan. Yaitu melalui edit gadget blog posts yang terletak di layout. Di sini bisa diatur berapa adsense yang mau ditampilkan di sela-sela postingan homepage.

Menurut Kang Adhy, tampilan adsense dengan cara edit gadget blog posts yang terletak di Tata Letak hasilnya tidak rapih bahkan bisa mengganggu tampilan homepage. Padahal sebelumnya tampilan blog kita sudah bagus. Gara-gara melakukan edit script adsense dengan cara tadi, tampilan blog menjadi kacau. Kelemahan lain jika menggunakan cara di atas adalah tidak bisa mengatur iklan adsense mau diletakkan di bawah postingan yang ke berapa?

Baca juga: Tidak Profesional, Robot Pekerja Di-PHK

Berbeda dengan yang di atas tadi, cara meletakkan Adsense di antara postingan Homepage Blogspot menurut KompiAjaib berdampak pada mudahnya mengatur posisi adsense di halaman depan blogspot. Bahkan dijamin tampilan homepage tidak akan berubah kacau.

Untuk tujuan kita ini, yaitu agar adsense muncul di antara postingan homepage sangat berkaitan dengan class post (.post). Bentuk halaman depan berupa list atupun grid sama-sama menggunakan class post tersebut.

Baca juga: Motorola Z3 dengan Konektivitas 5G via Mod 5G

Cara Meletakkan Adsense di Antara Postingan Homepage Blogspot

Agar adsense tampil di antara postingan halaman depan blog, langkah pertama adalah kita menemukan script  <b:includable id="main" var="top">. Secara lengkap script tersebut akan terlihat seperti berikut 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>

Selanjutnya, kita akan menggunakan kode seperti di bawah ini untuk menampilkan adsense seperti yang kita inginkankan.

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

1. Jika ingin menampilkan adsense di posisi awal postingan maka letakkan kode di atas tepat di bawah kode script berikut ini.

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

2. Jika adsense ingin dimunculkan di posisi paling akhir atau paling bawah postingan halaman depan maka letakkan kode sebelumnya persis di bawah secript:

<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>

3. Jika Adsense selanjutnya ingin ditampilkan di antara postingan homepage maka tambahkan script di bawah ini dengan kode index='x'.

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

Sehingga secara lengkap menjadi seperti berikut ini.

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

Dan kemudian gunakan script seperti ini:

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

Dan letakkan tepat di bahwah script seperti di bawah 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>

Angka 1 yang terdapat pada script di tas berarti adsense ditampilkan di bawah postingan yang kedua. Sedangkan angka 3 menunjukkan iklan akan ditampilan di bawah postingan yang keempat. Rekan-rekan dapat menyesuaikan angka-angka tersebut seperti yang diinginkan agar iklan adsense berada setelah postingan yang ke berapa.

Untuk mengatur kata "Advertisement" pada script sebelumnya, silahkan gunakan CSS di bawah ini. Dan bila di rasa kurang tepat, silahkan atur lagi hingga benar-benar pas.

.post span.title-ads{text-align: center;font-size:13px;font-weight:bold; display:block; margin:3px 0}

Dan setelah semuanya selesai maka script Cara mengatur Adsense di antara postingan Homepage Blogspot akan menjadi seperti berikut 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'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN DI SINI
</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'>Advertisement</span>
KODE IKLAN DI SINI
</div>
</b:if>
<b:if cond='data:x==9'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN DI SINI
</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'>Advertisement</span>
KODE IKLAN DI SINI
</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>

Bagaimana rekan, mudah bukan? Demikian cara meletakkan iklan Adsense di antara postingan halaman depan Blogspot.