Awal saya mendapatkan akun Google AdSense, saya sempat dibingungkan dengan cara pemasangan Iklan Adsense Di Antara Postingan Homepage pada blog saya yang sudah menggunakan AMP mungkin pengalaman ini dialami blogger newbie lainnya seperti saya. Saya sempat bertanya kepada blogger lain melalui group di facebook namun hasilnya nihil dan tidak satupun blogger yang memberi komentar memberikan petunjuk.
Setelah beberapa kali saya bertanya melalui group blogger di facebook namun hasilnya pun tetap NIHIL ( NOL BESAR). Namun setelah itu saya putuskan untuk menghubungi Mas Adhy Suryadi pemilik blog KompiAjaib.com melalui pesan pribadi (messenger) dan Alhamdulillah selang beberapa menit Mas Adhy Suryadi pun menjawab pertanyaan saya mengenai pemasangan iklan AdSense di antara postingan homepage blog valid AMP.
Ternyata Mas Adhy Suryadi pun pernah mengulas tutorial tersebut melalui blog yang bernama KompiAjaib.com dengan judul Mengatur Letak Iklan Adsense Di Antara Postingan Homepage Blogspot.
Untuk itu pada kesempatan kali ini saya ingin meneruskan ulasan dari Mas Adhy Suryadi yang beri judul Memasang Iklan Adsense Di Antara Postingan Homepage Valid AMP,
Menurut penjelasan yang saya pelajari dari ulasa di KompiAjaib.com bahwa biasanya untuk mengatur bentuk postingan di halaman depan baik bentuk list maupun grid, baik background post dan lainnya akan menggunakan class post (
.post). Nah dengan class post itu juga kita akan gunakan untuk tempat iklan agar tampilannya sama dengan tampilan postingan.Untuk menampilkan iklan di antara postingan di halaman utama blog, kita akan menyimpannya di daerah
<b:includable id='main' var='top'> yang biasanya akan tampak atau 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'>
<b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
</div></div>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</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'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' 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'>
</div></div>
</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>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<div class='post'>
<span class='title-ads'>Advertisement</span>
KODE IKLAN DI SINI
</div>
</b:if>
1. Iklan di awal atau di paling atas postingan.
Silahkan simpan kode untuk menampilkan iklannya persis di bawah kode
<b:include data='top' name='status-message'/>
2. Iklan di akhir atau paling bawah postingan
Silahkan simpan kode untuk menampilkan iklannya persis di bawah kode
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>
3. Iklan di antara postingan
Untuk menampilkan iklan di antara postingan, silahkan tambahkan kode index='x' pada kode di bawah ini
<b:loop values='data:posts' var='post'>
Sehingga menjadi seperti di bawah ini
<b:loop values='data:posts' var='post' index='x'>
Dan silahkan gunakan kode berikut
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<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>
Angka 1 berarti iklan ditampilkan di bawah postingan kedua, dan angka 3 berarti iklan ditampilan di bawah postingan keempat. Nah silahkan atur angka-angka tersebut untuk mengatur iklan di antara postingan.
Kemudian simpan kode tersebut tepat di bawah kode berikut
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
Dan tambahkan CSS ini untuk mengatur kata "Advertisement", jika kurang pas silahkan sesuaikan.
.post span.title-ads{font-size:16px;font-weight:bold;display:block;margin:10px 0}
Jadi secara lengkap tampilannya akan menjadi 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'/>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<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'>
</div></div>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class="date-outer">
</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'>
<div class="date-posts">
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
</div>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<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'>
</div></div>
</b:if>
<data:adEnd/>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>
<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>
Untuk DEMO bisa di lihat pada tampilan Hompepage blog ini