Cara Memasang Iklan di Tengah Artikel Blogger Secara Otomatis

---

Memasang iklan di tengah artikel Blogger merupakan salah satu cara menempatkan unit iklan pada area yang secara alami dilewati pembaca ketika membaca sebuah postingan. Posisi ini bisa digunakan untuk Google AdSense maupun jaringan periklanan lainnya selama penerapannya mengikuti kebijakan dari penyedia iklan yang digunakan.

Jika dulu pemasangan iklan di tengah artikel banyak mengandalkan script untuk menghitung jumlah paragraf, memotong struktur HTML atau memindahkan kode iklan menggunakan jQuery, sekarang prosesnya jauh lebih sederhana. Blogger dan Google AdSense sudah menyediakan dukungan untuk Auto ads, sedangkan unit iklan manual umumnya sudah menggunakan format responsif sehingga satu unit dapat menyesuaikan ukuran layar desktop maupun perangkat mobile.

Meskipun demikian, metode manual tetap berguna ketika saya ingin menentukan sendiri posisi iklan. Misalnya setelah beberapa paragraf pembuka, sebelum pembahasan utama atau pada bagian tertentu yang memiliki jarak cukup aman dari tombol dan elemen interaktif lainnya.

Informasi Singkat

---

Google AdSense mengizinkan penayang mengatur penempatan iklan, tetapi posisi iklan tidak boleh digunakan untuk mendorong klik yang tidak disengaja ataupun memberi perhatian yang tidak wajar kepada unit iklan.

Hindari penggunaan tulisan seperti "klik iklan ini", tanda panah yang menunjuk langsung ke iklan, animasi mencolok pada area iklan atau menempatkan unit terlalu dekat dengan tombol yang sering disentuh pengguna.

Sumber : Kebijakan Penempatan Iklan Google AdSense

Artikel Telah Diperbarui Metode lama tetap saya pertahankan sebagai referensi, tetapi penerapan utama sekarang diarahkan ke Auto ads, unit responsif dan JavaScript yang lebih sederhana.

DAFTAR ISI

1. Memahami Iklan Tengah Artikel
2. Menggunakan Auto Ads Blogger
3. Memasang Iklan Responsif Manual
4. Menentukan Posisi dengan Tag Khusus
5. Menempatkan Iklan Otomatis
6. Memasang Lebih dari Satu Iklan
7. Auto Ads vs Iklan Manual
8. Script Versi Sebelumnya
9. Random Ads dan Parallax
10. Tips Penempatan Iklan
11. FAQ

#1 Memahami Iklan Tengah Artikel

Iklan tengah artikel adalah unit iklan yang tampil di antara isi postingan. Walaupun sering disebut sebagai iklan tengah artikel, posisi sebenarnya tidak harus berada tepat pada titik 50 persen dari keseluruhan tulisan.

Dalam praktiknya saya lebih memilih menentukan lokasi berdasarkan struktur artikel. Artikel panjang dapat mempunyai beberapa lokasi yang nyaman untuk unit iklan, sedangkan artikel pendek sebaiknya menggunakan lebih sedikit iklan agar konten utama tetap mendominasi halaman.

Visibilitas Berada pada area yang memang dilewati pembaca.

Responsif Ukuran dapat menyesuaikan desktop dan perangkat mobile.

Nyaman Dibaca Tidak memotong alur artikel secara berlebihan.

Saya juga tidak menyarankan mengejar jumlah unit iklan sebanyak mungkin. Konten tetap harus menjadi bagian utama dari halaman karena pembaca datang untuk mendapatkan informasi, bukan untuk melihat kumpulan banner iklan.

#2 Menggunakan Auto Ads Blogger

Untuk Blogger yang tidak membutuhkan pengaturan posisi khusus, Auto ads merupakan pilihan paling praktis. Sistem Google akan menganalisis struktur halaman kemudian menentukan lokasi yang tersedia untuk menampilkan iklan.

Metode yang Direkomendasikan Gunakan Auto ads terlebih dahulu apabila Anda ingin pemasangan sederhana tanpa banyak memodifikasi struktur <data:post.body/> di dalam template.

Cara Mengaktifkan Auto Ads dari Blogger

1

Login Blogger

Buka dashboard Blogger kemudian pilih blog yang sudah terhubung dengan akun Google AdSense.

2

Buka Menu Penghasilan

Masuk ke bagian monetisasi melalui menu Penghasilan pada dashboard Blogger.

3

Aktifkan Iklan Otomatis

Pilih opsi yang tersedia untuk menampilkan Auto ads atau Iklan Otomatis pada blog.

4

Simpan Pengaturan

Setelah pengaturan disimpan, sistem Google akan mulai menentukan lokasi yang tersedia untuk penempatan iklan.

LIVE EXAMPLE Auto Ads

ADVERTISEMENT Auto Ads Posisi dipilih otomatis oleh sistem

Kontrol Auto Ads

Pengaturan Auto ads dapat digunakan untuk mengatur kepadatan iklan dan memberikan jarak yang lebih nyaman antar unit pada halaman artikel.

Untuk template Blogger custom, kode utama AdSense biasanya ditempatkan pada bagian <head>. Gunakan kode yang diberikan langsung dari dashboard AdSense karena Publisher ID berbeda untuk setiap akun.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>

Kode ca-pub-XXXXXXXXXXXXXXXX hanya merupakan contoh. Ganti menggunakan Publisher ID yang diberikan oleh akun Google AdSense Anda.

#3 Memasang Iklan Responsif Secara Manual

Apabila saya ingin menentukan posisi iklan sendiri, unit responsif menjadi pilihan yang praktis. Tidak perlu lagi membuat satu unit khusus desktop dan unit lainnya untuk perangkat mobile karena ukuran dapat menyesuaikan ruang yang tersedia.

Buat unit iklan melalui dashboard AdSense kemudian salin kode yang diberikan. Struktur kode biasanya kurang lebih seperti contoh berikut.

<div class="cfManualAds"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="auto" data-full-width-responsive="true"> </ins> </div> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

Masuk ke editor postingan Blogger kemudian ubah ke Tampilan HTML. Tempatkan kode unit iklan pada posisi di antara paragraf yang mempunyai ruang cukup nyaman.

LIVE EXAMPLE Iklan Manual

Ini merupakan contoh paragraf awal dari sebuah postingan Blogger. Pembaca dapat mengikuti artikel terlebih dahulu sebelum menemui unit iklan.

Paragraf kedua memberikan ruang yang cukup sehingga unit iklan tidak langsung muncul pada bagian paling awal artikel.

ADVERTISEMENT Responsive Ads 300 × Auto / Responsive

Setelah iklan, isi artikel kembali dilanjutkan sehingga unit iklan menjadi sebuah jeda alami di antara pembahasan.

Perhatikan Area Interaksi

Saya tidak menyarankan menaruh iklan tepat di bawah tombol Download, tombol Next, navigasi galeri atau elemen lain yang sering diklik oleh pengguna.

#4 Menentukan Posisi dengan Tag Khusus

Metode semi otomatis pada artikel versi sebelumnya menggunakan sebuah tag khusus sebagai penanda posisi iklan. Konsep tersebut masih berguna ketika saya ingin menentukan sendiri lokasi unit iklan pada saat menulis artikel.

Saya dapat membuat penanda sederhana seperti berikut.

<div class="cfAdsPosition"></div>

Tag tersebut kemudian ditempatkan melalui mode HTML Blogger di antara dua paragraf artikel.

<p> Paragraf artikel pertama berada di sini. </p> <p> Paragraf artikel kedua berada di sini. </p> <div class="cfAdsPosition"></div> <p> Artikel kembali dilanjutkan setelah posisi iklan. </p>

LIVE EXAMPLE Tag Khusus

<div class="cfAdsPosition"></div>

ADVERTISEMENT Posisi Iklan Ditentukan dari tag khusus

Keuntungan metode ini adalah posisi iklan sudah ditentukan sejak artikel dibuat sehingga script tidak perlu menebak lokasi berdasarkan panjang karakter HTML.

#5 Menempatkan Iklan Otomatis di Antara Paragraf

Jika tetap ingin menggunakan metode custom, saya lebih memilih menghitung elemen paragraf dibandingkan memotong keseluruhan isi HTML berdasarkan jumlah karakter. Pendekatan ini lebih aman terhadap gambar, heading, blockquote dan elemen lain yang berada di dalam postingan.

Contoh berikut mencari paragraf artikel yang cukup panjang kemudian menentukan posisi sekitar 40 persen dari keseluruhan paragraf yang memenuhi syarat.

Script berikut ditujukan untuk pengguna yang memahami struktur template Blogger. Backup template terlebih dahulu sebelum melakukan perubahan.

<div id="cfAutoArticleAds" style="display:none"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX" data-ad-format="auto" data-full-width-responsive="true"> </ins> </div>

<script> //<![CDATA[ (function(){ 'use strict'; var article = document.querySelector('.post-body'); if(!article){ return; } if(article.querySelector('.cfAutoInsertedAds')){ return; } var paragraphs = Array.prototype.filter.call( article.querySelectorAll('p'), function(p){ return p.textContent.trim().length >= 80; } ); if(paragraphs.length < 5){ return; } var position = Math.floor( paragraphs.length * 0.40 ); if(position < 2){ position = 2; } var source = document.getElementById( 'cfAutoArticleAds' ); if(!source){ return; } var ads = source.cloneNode(true); ads.removeAttribute('id'); ads.className = 'cfAutoInsertedAds'; ads.style.display = 'block'; paragraphs[position] .insertAdjacentElement( 'afterend', ads ); source.remove(); try{ (adsbygoogle = window.adsbygoogle || []) .push({}); }catch(e){} })(); //]]> </script>

Nilai posisi dapat dilihat pada bagian berikut.

var position = Math.floor( paragraphs.length * 0.40 );

Nilai 0.40 berarti script mencoba menempatkan unit sekitar 40 persen dari kumpulan paragraf yang memenuhi syarat.

Class .post-body juga harus disesuaikan apabila template Blogger Anda menggunakan nama class lain sebagai pembungkus isi postingan.

LIVE EXAMPLE Auto Insert

Paragraf 1

Paragraf 2

Paragraf 3

± 40%

IKLAN DITEMPATKAN DI SINI

Paragraf 4

Paragraf 5

#6 Memasang Lebih dari Satu Iklan

Versi lama artikel ini menggunakan nomor paragraf tertentu untuk menempatkan tiga slot iklan. Prinsip memasang beberapa unit masih dapat digunakan, tetapi saya tidak lagi menyarankan semua artikel dipaksa mempunyai jumlah iklan yang sama.

Artikel sepanjang 500 kata tentu berbeda dengan artikel 3.000 kata. Karena itu jumlah dan jarak unit iklan sebaiknya menyesuaikan banyaknya konten yang tersedia.

ARTIKEL PENDEK Lebih Sedikit Unit

Konten tetap menjadi bagian utama halaman.

ARTIKEL PANJANG Beberapa Posisi

Jarak antar iklan harus tetap nyaman.

LIVE EXAMPLE Multi Slot

AD SLOT 1

AD SLOT 2

AD SLOT 3

Apabila menggunakan Auto ads, saya lebih memilih mengatur kepadatan dari dashboard AdSense dibandingkan menambahkan banyak script manual ke dalam template.

#7 Auto Ads vs Iklan Manual

AUTO ADS

Lebih Praktis

Penempatan dibantu sistem Google.

Tidak perlu menentukan posisi satu per satu.

Cocok untuk blog dengan banyak artikel.

Pengelolaan menjadi lebih sederhana.

MANUAL

Lebih Terkontrol

Posisi dapat ditentukan sendiri.

Cocok untuk layout khusus.

Dapat disesuaikan per artikel.

Memerlukan pengelolaan lebih banyak.

Tidak ada keharusan memilih hanya satu pendekatan. Untuk blog dengan banyak artikel saya lebih memilih Auto ads karena pengelolaannya lebih sederhana. Untuk artikel atau landing page dengan struktur khusus, unit manual memberikan kontrol yang lebih tinggi.

#8 Script Versi Sebelumnya

Pada artikel versi sebelumnya saya menggunakan beberapa script yang memindahkan unit iklan berdasarkan tag <br>, menghitung panjang HTML serta menggunakan jQuery.

Kode lama tetap saya tampilkan sebagai referensi bagi pengguna template lama, tetapi bukan lagi menjadi metode utama untuk implementasi baru.

Versi Sebelumnya Referensi untuk template Blogger lama

Metode berikut menggunakan class .ads-post sebagai lokasi tujuan kemudian memindahkan unit iklan menggunakan jQuery.

<div class="ads-post"></div>

<script> $(document).ready(function(){ if($('.ads-post').length){ $('.ads-post').html(''); $('.iklanArtikel1:first') .remove() .clone() .appendTo('.ads-post'); } }); </script>

LIVE EXAMPLE Versi Lama

IKLAN SUMBER .iklanArtikel1

POSISI TUJUAN .ads-post

Versi Lama Pembagi Isi Artikel

Script lama lainnya menghitung panjang keseluruhan HTML kemudian mencari tag <br> terdekat untuk menentukan lokasi tengah artikel.

function insertMiddleAds(){ var obj0 = document.getElementById( "middle-ads1<data:post.id/>" ); var obj1 = document.getElementById( "middle-ads2<data:post.id/>" ); var s = obj1.innerHTML; var t = s.substr( 0, s.length / 2 ); var r = t.lastIndexOf( "<br>" ); if(r > 0){ obj0.innerHTML = s.substr(0,r); obj1.innerHTML = s.substr(r + 4); } }

Kode pembagi HTML di atas hanya saya pertahankan sebagai referensi versi sebelumnya. Untuk template baru saya lebih memilih menentukan posisi dari elemen paragraf.

#9 Random Ads dan Parallax

Dua metode dari artikel lama yang paling perlu diperhatikan adalah Random Ads dan Parallax Ads.

Versi lama menggunakan setInterval() untuk mengganti iklan setiap beberapa detik. Untuk Google AdSense saya tidak lagi menggunakan teknik seperti ini.

Begitu juga dengan efek parallax yang sengaja dibuat untuk menarik perhatian pengguna menuju iklan. Untuk Google Ads saya lebih memilih tampilan normal sehingga perhatian pengguna tidak diarahkan secara berlebihan ke unit iklan.

Tidak Direkomendasikan untuk Google AdSense

Hindari rotasi iklan berdasarkan timer dan efek visual yang sengaja dibuat untuk menarik perhatian menuju unit Google Ads.

Masih Bisa untuk Banner Sponsor Sendiri

Konsep rotasi masih dapat digunakan untuk banner internal atau sponsor yang dikelola sendiri selama tidak menggunakan unit Google AdSense dan sesuai dengan aturan dari sponsor yang bersangkutan.

LIVE EXAMPLE Banner Sponsor Non-AdSense

SPONSORED

YOUR SPONSOR Banner Sponsor 728 × 90

VISIT

<div class="cfSponsorRotator"> <a href="URL-SPONSOR-1" target="_blank" rel="sponsored noopener"> <img src="BANNER-SPONSOR-1.jpg" alt="Sponsor 1" /> </a> <a href="URL-SPONSOR-2" target="_blank" rel="sponsored noopener"> <img src="BANNER-SPONSOR-2.jpg" alt="Sponsor 2" hidden /> </a> </div>

<script> // Untuk banner sponsor NON-ADSENSE (function(){ var box = document.querySelector( '.cfSponsorRotator' ); if(!box){ return; } var items = box.querySelectorAll('a'); if(items.length < 2){ return; } var index = 0; setInterval(function(){ items[index] .querySelector('img') .hidden = true; index = (index + 1) % items.length; items[index] .querySelector('img') .hidden = false; },10000); })(); </script>

#10 Tips Menentukan Posisi Iklan

Beri Ruang yang Cukup Jangan menempelkan unit iklan pada tombol download atau navigasi.

Gunakan Format Responsif Pastikan unit tidak keluar dari lebar artikel.

Jaga Alur Membaca Jangan memotong terlalu banyak paragraf menggunakan unit iklan.

Perhatikan Artikel Pendek Jumlah unit sebaiknya menyesuaikan jumlah konten.

Hindari Perhatian Berlebihan Jangan menambahkan tanda panah atau animasi menuju unit iklan.

Uji Tampilan Mobile Pastikan posisi iklan tetap nyaman ketika dilihat pada layar kecil.

Saya lebih menyukai posisi iklan yang terasa sebagai jeda alami di dalam artikel. Misalnya ketika satu pembahasan selesai sebelum masuk ke topik berikutnya. Dengan pola seperti ini iklan tetap mendapatkan ruang tanpa membuat halaman terasa seperti kumpulan banner.

Hal penting lainnya adalah jangan pernah mengklik iklan sendiri untuk melakukan pengujian. Klik dan tayangan harus berasal dari aktivitas pengguna yang sah.

FAQ Memasang Iklan di Tengah Artikel Blogger

Apakah iklan boleh dipasang di tengah artikel?

Ya. Iklan dapat ditempatkan di dalam artikel selama penerapannya mengikuti kebijakan jaringan iklan yang digunakan dan tidak mendorong klik yang tidak disengaja.

Apakah harus menggunakan script?

Tidak. Anda dapat menggunakan Auto ads atau memasang unit responsif langsung melalui mode HTML postingan Blogger.

Mana yang lebih baik Auto Ads atau manual?

Auto ads lebih praktis untuk blog dengan banyak artikel. Penempatan manual lebih cocok apabila Anda membutuhkan kontrol posisi yang lebih spesifik.

Apakah desktop dan mobile membutuhkan unit berbeda?

Tidak selalu. Unit iklan responsif dapat menyesuaikan ruang yang tersedia pada berbagai ukuran layar.

Apakah iklan boleh dibuat parallax?

Untuk Google AdSense saya tidak menyarankan efek yang sengaja dibuat untuk menarik perhatian pengguna menuju iklan. Gunakan tampilan yang lebih natural.

Berapa jumlah iklan yang ideal?

Tidak ada satu jumlah yang cocok untuk semua artikel. Panjang artikel, layout dan kenyamanan pembaca harus diperhitungkan bersama.

Pada akhirnya saya tidak lagi melihat pemasangan iklan di tengah artikel sekadar sebagai cara untuk menambahkan sebanyak mungkin unit iklan. Posisi iklan harus menjadi bagian dari desain halaman yang tetap menghargai kenyamanan pembaca.

Jika blog masih memakai script lama, ada baiknya periksa kembali kode yang tertanam di template. Script berbasis jQuery, pemotongan innerHTML, random ads maupun parallax mungkin masih dapat bekerja secara teknis, tetapi belum tentu menjadi pilihan terbaik untuk Blogger dan Google AdSense sekarang.

Saya sendiri lebih memilih Auto ads untuk kebutuhan sederhana. Unit manual saya gunakan ketika sebuah artikel membutuhkan posisi khusus. Pendekatan seperti ini membuat pengelolaan blog lebih mudah sekaligus menjaga struktur artikel tetap bersih.

Referensi Resmi

Kebijakan Program Google AdSense Kebijakan Penempatan Iklan Iklan Otomatis pada Blogger Traffic Tidak Valid

BLOGGER DEVELOPMENT

Butuh Penempatan Iklan yang Lebih Rapi?

CodeFlare dapat membantu menyesuaikan template Blogger, membuat script penempatan iklan responsif, memperbaiki layout AdSense, optimasi tampilan mobile ataupun membuat website Blogger sesuai kebutuhan bisnis Anda.

Custom Widget Fix Template Blogger Website Custom Script

Konsultasikan dengan CodeFlare

Keyword

cara memasang iklan di tengah artikel blogger · iklan tengah artikel · adsense blogger · auto ads blogger · iklan responsif blogger · cara pasang adsense di postingan · iklan dalam artikel blogger