Pada Layout Template ini Sudah disediakan beberapa placement ads yang bisa langsung Anda pasang termasuk auto Ads, iklan atas dan bawah artikel, serta iklan matched content yang harus diedit pada menu Edit HTML. Dalam postingan ini akan dijelaskan secara rinci cara setting Ads beserta penulisan kode Ads yang benar.

Penulisan Kode Adsense yang Benar

Salah satu penyebab lambatnya loading blog adalah kode adsense, banyak blogger yang salah dalam penulisan kode adsense sehingga berimbas pada loading blog mereka, di template ini sudah disiapkan script adsense default yang bisa Anda aktifkan.

Penulisan kode adsense yang benar adalah hanya perlu menuliskan script googleads.js satu kali. Setiap penambahan unit iklan anda tidak perlu menulis kode script adsense lengkap, cukup dengan menuliskan tag <ins ... /> tanpa <script src='...googleads.js'/> seperti contoh dibawah ini:

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-format='link' data-ad-slot='xxxxxxxxxx' data-full-width-responsive='false'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Untuk menambahkan iklan ads pada template ini mula-mula aktifkan kode <script src='...googleads.js'/> yang sudah tersedia dalam template ini. Pada Edit HTML silahkan cari </body> dan temukan kode dibawah ini :

<!-- <script>/*<![CDATA[*/ (function() { var add = document.createElement('script'); var att = document.createAttribute('data-ad-client'); att.value = 'ca-pub-0000000000000000'; add.setAttributeNode(att); add.defer = true; add.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })(); /*]]>*/</script> -->

// Hapus bagian yang sudah ditandai menjadi seperti dibawah dan klik simpan template Anda.

<script>/*<![CDATA[*/ (function() { var add = document.createElement('script'); var att = document.createAttribute('data-ad-client'); att.value = 'ca-pub-0000000000000000'; add.setAttributeNode(att); add.defer = true; add.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })(); /*]]>*/</script>

Dalam menu Layout atau Tata Letak klik salah satu widget 'ads placement' dan tempelkan kode iklan Anda disana, ingat! yang perlu Anda tuliskan hanya kode Adsense seperti dibawah ini:

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-format='link' data-ad-slot='xxxxxxxxxx' data-full-width-responsive='false'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

// Bagian yang ditandai merupakan kode id penayangan dan id iklan Adsense serta format iklan Anda

Catatan : Kemungkinan akan membutuhkan sedikit waktu untuk iklan Anda tampil.

Cara Menambahkan Matched Content Ads

Bagi blog Anda yang sudah layak mendapatkan iklan matched content ads atau yang biasa disebut iklan artikel terkait dan ingin menerapkannya pada pada template ini caranya sangat mudah:

Pertama pada Edit HTML carilah kode dibawah ini:

<b:includable id='post-adrelated' var='post'>
  <div class='related-posts' id='related-ad'>
    <div class='related-ads'/>
    <!-- Add your ad unit in this place -->
  </div>
</b:includable>

// Tambahkan kode iklan Anda pada bagian yang sudah ditandai

Kemudian cari lagi kode dibawah ini :

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-related'/>

// Ganti kode yang sudah ditandai dengan name='post-relatedAd' yang keseluruhannya menjadi seperti dibawah :

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-relatedAd'/>

Kode diatas secara otomatis mengganti widget artikel terkait dengan iklan matched content, namun jika Anda ingin tetap mempertahankan widget artikel terkait template ini silahkan ikuti langkah-langkah dibawah ini:

Bagaimana jika ingin menambahkan iklan matched content tepat dibawah artikel terkait?

Caranya sama seperti diatas, hanya saja pada bagian kedua Anda tidak perlu mengubah apapun. Cukup tambahkan kode seperti dibawah ini tepat dibawah kode bagian kedua :

// Sebelum
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-related'/>

// Tambahkan kode baru tepat dibawahnya menjadi seperti dibawah ini
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-related'/>
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-relatedAd'/>

// Anda bisa merubah urutannya menjadi widget related post yang paling atas atau sebaliknya

Bagaimana jika ingin mengubah iklan menjadi Lazy Adsense?

Sebagian blogger terkadang memutuskan untuk menggunakan script lazy adsense di blog mereka dengan tujuan untuk meringankan loading serta meningkatkan skor blog di Google Pagespeed. Jika Anda juga berpendapat yang sama, maka silahkan ikuti tata cara dibawah ini untuk menggunakan lazy Adsense :

Ubahlah kode script pada bagian pertama yang bisa Anda temukan di bagian bawah template ini atau cara cepatnya silahkan cari </body> pada menu Edit HTML. Kode awalnya akan seperti dibawah dan ubah menjadi kode kedua :

<script>/*<![CDATA[*/ (function() { var add = document.createElement('script'); var att = document.createAttribute('data-ad-client'); att.value = 'ca-pub-0000000000000000'; add.setAttributeNode(att); add.defer = true; add.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })(); /*]]>*/</script>

// Ubah atau ganti seluruh kode diatas dengan kode dibawah ini :

<script>/*<![CDATA[*/ var lazyadsense = false; window.addEventListener("scroll", function(){ if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) { (function() { var ad = document.createElement('script'); ad.defer = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyadsense = true; } }, true) /*]]>*/</script>

Jika ada yang belum Anda mengerti terkait pemasangan kode Adsense pada template ini, silahkan ajukan pertanyaan Anda pada kolom komentar.