Ditulis oleh: Ditulis pada: 10/29/2016
Sebenarnya untuk mengatur iklan adsense di antara postingan di halaman depan (homepage) blogspot sudah disediakan oleh Blogger. Melalui edit gadget blog posts di tata letak (layout), kita bisa mengatur agar iklan tampil di antara postingan di halaman utama dan berapa banyak iklan yang ditampilkan.Namun menurut saya, tampilan iklan dengan cara tadi kadang mengganggu tampilan halaman depan blog yang sudah kita tata sedemikian rupa. Dan kita tidak bisa mengatur di bawah postingan ke berapa iklan ingin ditampilkan.
Masih ingat dengan postingan kang Ismet tentang mengatur jumlah label di postingan blogspot?
Nah dengan conditional tags seperti itu kita juga dapat mengatur letak iklan adsense di halaman depan blogspot tanpa merusak tampilan halaman depan.
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>
Untuk menampilkan iklan silahkan gunakan kode di bawah ini
<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 kodeindex='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>