Solusi Terbaik Cara Pasang Iklan Ditengah Artikel Blog


Cara Memasang Iklan In-Article Ads di Tengah Postingan Artikel. Salah satu trik untuk membuat iklan tampil lebih fokus. Trik ini secara langsung akan memiliki peluang lebih besar untuk dilihat dan dikunjungi oleh pengunjung blog. Semakin banyak iklan dari sponsor yang dikunjungi, jelas akan semakin meningkat pula penghasilan yang didapat untuk pemilik blog.

Bagi pemilik blog yang mengikuti program google adsense atupun program CPM selain google adsense cara ini boleh dilakukan dan tidak melanggar TOS (Terms of Service) google adsense ataupun situs penyedia layanan iklan lainnya. Cara ini juga disarankan untuk diterapkan karena memiliki peluang iklan yang akan dikunjungi oleh pengunjung blog secara sah dan normal.

Seperti kata ungkapan pepatah yang sering kita dengar bahwa memang benar adanya "Posisi Menentukan Prestasi" begitu pula dengan penempatan iklan pada suatu blog, harus dengan cermat menempatkan posisi dari iklan yang ditayangkan. Semakin bagus lokasi penempatan iklan maka semakin besar pula kemungkinan iklan akan terlihat dan diklik oleh pengunjung blog.

Harap diperhatikan jangan sampai posisi iklan menggangu layout artikel pada blog, karena artikel yang sedang dibaca oleh pengunjung blog Anda akan menghalangi pandangan pembaca yang akan berakibat peluang besar dari iklan untuk diklik akan hilang. Selain itu jangan menggunakan kata-kata himbauan atau ajakan di sekitar posisi iklan karena otomatis akan melanggar TOS (Terms of Service) yang diterapkan pada semua penyedia layanan iklan. Semua penyedia layanan iklan melarang kata-kata himbauan atau ajakan baik secara langsung ataupun secara halus.

Informasi Singkat
Kutipan kebijakan Google Adsense mengenai :
Mendorong klik atau tampilan (inventaris non-reward)

Untuk memastikan pengalaman yang baik bagi pengguna dan pengiklan, penayang yang berpartisipasi dalam program AdSense tidak boleh:
  • Memberikan kompensasi kepada pengguna untuk melihat iklan atau melakukan penelusuran, atau menjanjikan kompensasi kepada pihak ketiga untuk aktivitas seperti itu.
  • Mendorong pengguna agar mengklik iklan Google menggunakan frasa seperti "klik iklan ini", "dukung kami", "kunjungi link ini", atau ungkapan lain yang serupa.
  • Mengarahkan perhatian pengguna ke iklan menggunakan tanda panah atau materi bergambar penarik perhatian lainnya.
  • Menempatkan gambar yang menyesatkan di samping iklan individual.
  • Menempatkan iklan dalam skrip kotak mengambang.
  • Memformat iklan sehingga tidak dapat dibedakan dengan konten lain pada halaman tersebut.
  • Memformat konten situs sehingga sulit dibedakan dengan iklan.
  • Menempatkan label menyesatkan di atas unit iklan Google. Misalnya, iklan boleh berlabel "Pesan Sponsor" atau "Iklan", namun bukan "Situs Favorit" atau "Penawaran Terbaik Hari ini".
Sumber : Bantuan Adsense

Walaupun cara ini terbilang sah namun jangan sampai Anda menggunakannya secara berlebihan (iklan yang ditampilkan terlalu banyak). Selain mengganggu, pemasangan secara berlebihan juga akan membuat kesal pengunjung blog. Saran saya gunakan secukupnya saja.

Sebelum lebih jauh membahas Cara Memasang Iklan In-Article Ads di Tengah Postingan Artikel ada baiknya Anda perhatikan terlebih dahulu dari jenis blog yang Anda kelola, apabila isi postingan artikel menggunakan banyak gambar maka sebaiknya gunakan cara semi otomatis dalam penempatan iklan, akan tetapi apabila penggunaan gambar dan tulisan artikel berimbang atau lebih maka sebaiknya gunakan cara full otomatis penempatan artikel.

DAFTAR ISI
  1. Penempatan Iklan Dengan Cara Semi Otomatis
  2. Penempatan Iklan Dengan Cara Full Otomatis
  3. Penempatan Iklan Dengan Cara Kombinasi
  4. Penempatan Iklan Lebih Dari Satu Slot Iklan
  5. Penempatan Iklan Dengan Tampilan Acak
  6. Bonus [ Tampilan Iklan Dengan Cara Parralax Scroll ]
#1 Penempatan Iklan Dengan Cara Semi Otomatis


Cara Penempatan Iklan Dengan Cara Semi Otomatis merupakan Cara Memasang Iklan In-Article Ads di Tengah Postingan Artikel dengan cara dengan memberikan tag khusus pada posisi penempatan iklan di dalam postingan artikel blog. Dengan menggunakan cara ini posisi dari penempatan iklan akan lebih teratur dan terlihat lebih sesuai untuk posisi iklan di dalam teks artikel. Posisi penempatan tag khusus tersebut terlebih dahulu Anda tentukan posisinya di barisan teks artikel yang kemudian posisi dari tag khusus tersebut akan digunakan sebagai acuan posisi iklan yang akan ditampilkan.

Tag Khusus Acuan Untuk Posisi Iklan
Tag khusus yang dimaksud adalah tag HTML yang penamaannya diatur oleh Anda sendiri sebagai acuan dalam menempatkan posisi iklan, sebagai contoh bisa dilihat dibawah ini.

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

Seperti yang terlihat pada kode diatas, tag <div class="ads-post"></div> merupakan tag khusus yang admin buat untuk posisi iklan yang akan ditampilkan. Tag khusus bisa Anda tentukan sendiri baik menggunakan tag HTML (seperti tag div, span, b, i ,a atau tag HTML lainnya) dan dikombinasikan dengan nama class-nya. Untuk penamaan class usahakan menggunakan penamaan yang unik dan berbeda dari nama class yang sudah ada ditemplate blog, karena untuk menghindari salah penempatan iklan akibat penggunaan nama class yang sama dari yang sudah ada ditemplate blog. Apabila masih bingung silakan gunakan tag khusus pada kode diatas saja akan tetapi apabila nanti tampilannya berbenturan dengan nama class yang sudah ada ditemplate Anda, maka Anda harus membuat nama class yang lainnya, semisal menambahkan angka 01 pada nama class-nya sehingga class yang digunakan menjadi <div class="ads-post01"></div>.

Penempatan Tag Khusus
Posisi penempatan tag khusus ditempatkan di dalam postingan artikel pada mode kode HTML. Silakan Anda atur sendiri untuk menaruh tag khusus tersebut, tag khusus bisa ditempatkan lebih dari satu kali. Pastikan tag khusus tidak berbenturan dengan elemen lain, seperti elemen blockquote, h2, tempat postingan kode atau elemen gambar.

Sebagai contoh bisa dilihat dibawah ini :
<div align="justify"> Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.
</div>

<br> <div class="ads-post01"></div><br>

<div align="justify">
Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun. Richard McClintock, seorang professor Bahasa Latin dari Hampden-Sidney College di Virginia, mencoba mencari makna salah satu kata latin yang dianggap paling tidak jelas, yakni consectetur, yang diambil dari salah satu bagian Lorem Ipsum. Setelah ia mencari maknanya di di literatur klasik, ia mendapatkan sebuah sumber yang tidak bisa diragukan. Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah "de Finibus Bonorum et Malorum" (Sisi Ekstrim dari Kebaikan dan Kejahatan) karya Cicero, yang ditulis pada tahun 45 sebelum masehi. BUku ini adalah risalah dari teori etika yang sangat terkenal pada masa Renaissance.
</div>

Seperti yang terlihat pada contoh diatas, untuk menaruh tag khusus Anda harus masuk dalam mode kode HTML, dan setelah itu taruh tag khusus di antara paragraf atau lokasi lain di dalam artikel yang menurut Anda strategis untuk lokasi penempatan iklan.

Hasil contoh apabila sudah diterbitkan (publish) bisa dilihat dibawah ini :
Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.

Contoh Iklan Ditampilkan Sesuai Pilihan Ukuran Iklan

Tidak seperti anggapan banyak orang, Lorem Ipsum bukanlah teks-teks yang diacak. Ia berakar dari sebuah naskah sastra latin klasik dari era 45 sebelum masehi, hingga bisa dipastikan usianya telah mencapai lebih dari 2000 tahun. Richard McClintock, seorang professor Bahasa Latin dari Hampden-Sidney College di Virginia, mencoba mencari makna salah satu kata latin yang dianggap paling tidak jelas, yakni consectetur, yang diambil dari salah satu bagian Lorem Ipsum. Setelah ia mencari maknanya di di literatur klasik, ia mendapatkan sebuah sumber yang tidak bisa diragukan. Lorem Ipsum berasal dari bagian 1.10.32 dan 1.10.33 dari naskah "de Finibus Bonorum et Malorum" (Sisi Ekstrim dari Kebaikan dan Kejahatan) karya Cicero, yang ditulis pada tahun 45 sebelum masehi. BUku ini adalah risalah dari teori etika yang sangat terkenal pada masa Renaissance.

Penempatan Kode CSS dan JavaScript DiDalam Kode HTML Template Blog
Setelah memahami fungsi dari tag khusus, maka langkah selanjutnya adalah menempatkan kode otomatisasi dari penempatan iklan. Kode yang dimaksud adalah kode CSS dan Javascript. Kode tersebut ditaruh didalam kode HTML template (tema). Berikut cara memasang kode tersebut.

PERINGATAN
Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

  • Silakan login dahulu ke blog Anda.

  • Klik tombol Tema untuk masuk ke tema editor.


  • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


  • Geser scrollbar ke posisi paling bawah.


  • Letakan kode dibawah ini tepat diatas kode </body>.


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    @media screen and (max-width:550px){
    .iklanArtikel1{display:none;}
    .iklanArtikel2{display:block;}
    }
    @media screen and (min-width:550px){
    .iklanArtikel2{display:none;}
    .iklanArtikel1{display:block;}
    }
    </style>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class="iklanArtikel1" align="center">
    Kode Iklan dengan Ukuran Lebar lebih dari 550 px
    </div>

    <div class="iklanArtikel2" align="center">
    Kode Iklan dengan Ukuran Lebar maksimal 300 px
    </div>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
    $(document).ready(function() {
    if ($('.ads-post').length) {
    $('.ads-post').html('');
    $('.iklanArtikel1:first,.iklanArtikel2:first').remove().clone().appendTo('.ads-post');
    }
    });
    </script>
    </b:if>

  • Klik tombol Simpan untuk menyimpan hasil peletakan kode.

KETERANGAN :
* Kode CSS, HTML dan Javascript sudah saya buat semaksimal mungkin responsif untuk semua perangkat pengunjung blog.
* Kode Iklan dengan Ukuran Lebar lebih dari 550 px, merupakan iklan dengan format lebar minimal 550 px atau lebar maksimal dari postingan artikel apabila dilihat dengan layar desktop komputer.
* Kode Iklan dengan Ukuran Lebar maksimal 300 px, merupakan iklan dengan format lebar maksimal 300 px atau lebar maksimal dari postingan artikel apabila dilihat dengan perangkat mobile browser.
* Pastikan kedua format iklan harus diisi, nanti kode CSS yang akan mengatur tampilan iklan yang ditampilkan. Iklan yang ditampilkan secara otomatis akan disesuaikan dengan perangkat pengunjung blog.
* Apabila Anda menggunakan format iklan yang sudah responsive maka diperlukan perubahan pada kode CSS, HTML dan Javascript di atas. Hilangkan format iklan kedua pada semua kode diatas.

Kode dibawah ini apabila format iklan sudah otomatis responsif.
Kode CSS tidak diperlukan lagi apabila kode iklan sudah responsif

* Apabila kode iklan yang digunakan sudah otomatis responsif, maka kode CSS sudah tidak diperlukan lagi. Namun apabila kode iklan yang Anda gunakan belum responsif silakan Anda mengacu pada kode diatas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="iklanArtikel1" align="center">
Kode Iklan sudah otomatis responsif
</div>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
$(document).ready(function() {
if ($('.ads-post').length) {
$('.ads-post').html('');
$('.iklanArtikel1:first').remove().clone().appendTo('.ads-post');
}
});
</script>
</b:if>


* Pada kode $('.ads-post') merupakan tag khusus yang digunakan, pastikan tag khusus tersebut sudah Anda sesuaikan dengan tag khusus yang Anda buat.

Penempatan Kode CSS dan JavaScript DiDalam Postingan Artikel
Penempatan kode CSS, HTML dan Javascript di atas juga bisa ditempatkan di dalam postingan artikel apabila Anda hanya menginginkan iklan dari situs layanan penyedia iklan tertentu ditampilkan pada postingan artikel berbeda-beda untuk setiap artikel. Lokasi penempatan hendaknya ditaruh paling bawah dalam postingan artikel agar tidak membingungkan pada saat pembuatan artikel. Pastikan iklan yang ditampilkan tidak melebihi batas lebar postingan artikel.

Penempatan Kode CSS dan JavaScript DiDalam Kotak Widget
Penempatan kode CSS, HTML dan Javascript di atas selain ditempatkan pada template blog atau di dalam postingan artikel, kode-kode tersebut bisa juga ditempatkan didalam kotak widget (sebagai widget blog). Lokasi penepatan dikotak widget hanya untuk menaruh kode-kode tersebut namun tidak ditampilkan pada kotak widget melainkan akan ditampilkan pada tag khusus yang didalam postingan artikel. Kecuali tag khusus tersebut anda tempatkan juga dikotak widget, maka iklan tersebut akan muncul dikotak widget.

#2 Penempatan Iklan Dengan Cara Full Otomatis


Cara Penempatan Iklan Dengan Cara Full Otomatis agak berbeda dengan cara di atas yang sudah dijelaskan, perbedaannya terletak pada penggunaan kode Javascript. Namun cara ini juga masih bisa dikombinasikan dengan cara semi otomatis. Cara full otomatis akan meletakan iklan langsung ditengah artikel tanpa perlu menggunakan tag khusus, namun apabila ingin mengkombinasikan dengan cara semi otomatis maka akan diperlukan penggunaan tag khusus.

Cara Penempatan Iklan Dengan Cara Full Otomatis yang saya bagikan akan terbagi menjadi dua kategori, yaitu kategori pertama langsung menaruh iklan ditengah artikel walaupun berbenturan dengan elemen HTML didalam artikel dan kategori kedua dengan menaruh iklan ditengah artikel tanpa mengganggu tampilan yang berbenturan dengan blockquote, h2 dan elemen HTML lain yang akan menyebabkan tampilan iklan tidak sesuai dengan struktur artikel yang Anda buat.

Perbedaan cara pertama dan kedua terletak dari penggunaan script yang digunakan. Dari kedua kategori cara penempatan tersebut, masing-masing memiliki kelebihan dan kekurangan. Dalam postingan artikel ini saya akan membagikan kedua script dari cara tersebut untuk menambah wawasan dan informasi.

Cara Memasang Script Full Otomatis
  • Silakan login dahulu ke blog Anda.

  • Klik tombol Tema untuk masuk ke tema editor.


  • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


  • Geser scrollbar ke posisi paling bawah.


  • Cari kode <data:post.body/> kemudian ganti dengan script full otomatis baik cara 1 ataupun cara 2. Pilih dan gunakan script tersebut salah satu aja. Dikarenakan kode template blogspot yang digunakan berbeda-beda, maka kode <data:post.body/> pada template blogspot biasanya terdapat lebih dari satu, bisa dua sampai empat. Silakan di coba mengganti kode tersebut satu persatu kemudian lihat hasilnya, jangan merubah semua kode <data:post.body/> ini karena tampilan blog Anda bisa berantakan. Satu persatu di coba aja dulu apabila sudah tampil iklannya sesuai yang diinginkan berarti kode tersebut yang hanya perlu diganti. Saran saya coba mengganti kode dari posisi kode <data:post.body/> ini yang paling akhir, biasanya sih yang terakhir yang menampilkan postingan artikel.

    Pastikan Anda sudah mem-backup kode HTML template blog sebelum melakukan proses trial and error (coba-coba) ini, karena untuk menghindari kemungkinan terjadinya kerusakan pada kode HTML template blog Anda.

  • Mengganti kode <data:post.body/> ini dengan script full otomatis yang mana kode script full otomatis tersebut ada dibawah ini, silakan dibaca dahulu sebelum memutuskan menggunakan script full otomatis untuk menampilkan iklan ditengah artikel. Seperti yang sudah dijelaskan bahwa terdapat dua script untuk menampilkan iklan ditengah artikel, gunakan salah satu saja.

Script Cara Full Otomatis 1
Penempatan posisi iklan apabila menggunakan script ini masih bisa disesuaikan tergantung kebutuhan Anda. Script ini tidak hanya akan menempatkan iklan secara Full Otomatis pada bagian tengah artikel, namun bisa juga ditaruh 1/3 posisi, 1/4 posisi dst dari postingan artikel. Namun posisi iklan yang ditampilkan akan langsung ditaruh pada posisi yang sudah Anda tentukan. Apabila ditentukan di tengah artikel maka posisi iklan akan memotong elemen yang ada ditengah artikel dan memasukan posisi iklan untuk ditampilkan. Sedangkan elemen yang kebetulan berada ditengah akan secara otomatis berada dibawah iklan yang ditampilkan. Berikut kode script untuk Script Cara Full Otomatis 1.

<div expr:id='&quot;middle-ads1&quot; + data:post.id'/>
<div id='middle-ads' class='middle-ads'>
KODE IKLAN ANDA YANG SUDAH DI PARSE
</div>
<div expr:id='&quot;middle-ads2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
function insertMiddleAds(){
var obj0=document.getElementById(&quot;middle-ads1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;middle-ads2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
}
insertMiddleAds();
</script>

KETERANGAN :
  • Sebelum menaruh kode iklan, pastikan terlebih dahulu kode iklan yang akan digunakan sudah di parsing. Apabila belum silakan diparsing terlebih dahulu disini Code Parser
  • Perhatikan script di atas pada kode length/2, angka 2 berarti posisi iklan akan ditampilkan ditengah artikel (1/2 artikel). Apabila ingin ditempatkan pada posisi 1/3 bagian artikel maka tinggal merubah angka 2 menjadi angka 3 (length/3), begitu pun seterusnya. Semakin tinggi angka maka posisi iklan semakin ke atas.
  • Acript ini juga bisa memposisikan iklan pada awal dan akhir artikel, untuk memposisikan iklan pada awal artikel maka pada script diatas pada kode [ var t=s.substr(0,s.length/2); ] dirubah menjadi [ var t=s.substr(0,0); ]
  • Apabila iklan ingin ditaruh pada akhir artikel maka tinggal merubah kode [ var t=s.substr(0,s.length/2); ] dirubah menjadi [ var t=s.substr(0,s.length); ]

Script Cara Full Otomatis 2
Penempatan posisi iklan apabila menggunakan script ini masih bisa juga disesuaikan tergantung kebutuhan Anda. Script ini secara otomatis akan menyesuaikan dengan elemen yang berada pada posisi iklan yang ingin ditampilkan. Apabila terdapat elemen ditengah artikel misalnya elemen gambar, elemen blockquote, maka posisi iklan akan disesuaikan dan ditaruh pada paragraf berikutnya tanpa merusak struktur tampilan yang sudah Anda buat pada artikel tersebut. Berikut kode script untuk Script Cara Full Otomatis 2.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='middle-ads' id='middle-ads' itemprop='articleBody'>
<data:post.body/>
</div>
<div class='inline_middle_ads' id='inline_middle_ads'>
KODE IKLAN ANDA YANG SUDAH DI PARSE
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);}
}
var middleads = document.getElementById(&quot;inline_middle_ads&quot;);
var target = document.getElementById(&quot;middle-ads&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);
if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);
if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);
if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

KETERANGAN :
  • Sebelum menaruh kode iklan, pastikan terlebih dahulu kode iklan yang akan digunakan sudah di parsing. Apabila belum silakan diparsing terlebih dahulu disini Code Parser
  • Perhatikan kode :

    <div class='middle-ads' id='middle-ads' itemprop='articleBody'>
    <data:post.body/>
    </div>
    ...
    var target = document.getElementById(&quot;middle-ads&quot;);

    apabila pada kode <data:post.body/> default template Anda sudah terdapat aturan CSS sebelumnya, misalnya <div id="sesuatu" class="sesuatu"><data:post.body/></div> maka kode script di atas sebaiknya ikut disesuaikan sehingga pada kode script diatas menjadi,

    <div class='sesuatu' id='sesuatu' itemprop='articleBody'>
    <data:post.body/>
    </div>
    ...
    var target = document.getElementById(&quot;sesuatu&quot;);

    dengan memodifikasi sedikit kode tersebut diharapkan struktur tampilan artikel yang sudah ada pada template blog Anda tidak akan ikut berubah, sehingga penggunaan script ini menjadi lebih fleksible mengikuti aturan kode CSS yang sudah diterapkan pada template blog Anda.

    Perhatikan juga penggunaan ID elemen yang berwarna biru, nama ID elemen harus sama dengan yang di kode script kalo nama elemen class boleh beda.

#3 Penempatan Iklan Dengan Cara Kombinasi


Cara penempatan iklan ditengah artikel bisa dikombinasikan menggunakan cara semi otomatis dan cara full otomatis. Cara full otomatis (baik cara 1 ataupun cara 2) digunakan sebagai otomatisasi tag khusus untuk penempatan dari posisi iklan sedangkan untuk data iklan menggunakan script dari cara semi otomatis. Penempatan Iklan Dengan Cara Kombinasi perlu memodifikasi sedikit script full otomatis sedangkan script semi otomatis tidak perlu dirubah cukup menaruh script semi otomatis di bawah postingan artikel apabila ingin menggunakan data iklan yang berbeda-beda. Apabila menaruh pada kotak widget tidak bisa digunakan untuk data iklan yang berbeda-beda tetapi hanya untuk mempermudah mengganti data iklan apabila sewaktu-waktu ingin merubah layanan iklan dari situs penyedia jasa layanan iklan yang lama ke situs penyedia jasa layanan iklan yan baru.

Tujuan menggunakan Penempatan Iklan Dengan Cara Kombinasi adalah supaya iklan yang ditampilkan bisa menggunakan layanan iklan dari situs penyedia jasa layanan iklan yang berbeda-beda pada masing-masing artikel. Contoh, misalkan pada halaman artikel A ingin iklan yang ditampilkan menggunakan jasa layanan iklan google adsense kemudian pada artikel B ingin menggunakan jasa layanan iklan Bidvertiser. Hal ini bisa dilakukan jika menggunakan script semi otomatis untuk mengolah data iklan ditaruh pada postingan artikel sedangkan untuk otomatisasi posisi iklan menggunakan script full otomatis yang sudah ditaruh pada template blog.

Script Semi Otomatis
Script semi otomatis di bawah ini digunakan pada masing-masing artikel apabila Anda memilih Penempatan Iklan Ditengah Artikel Dengan Cara Kombinasi. Apabila menggunakan kode iklan yang sudah responsif silakan Anda lihat lagi kodenya pada cara pertama di atas.

<div class="iklanArtikel1" align="center">
Kode Iklan dengan Ukuran Lebar lebih dari 550 px
</div>

<div class="iklanArtikel2" align="center">
Kode Iklan dengan Ukuran Lebar maksimal 300 px
</div>

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

Jangan lupa script diatas harus disesuaikan dengan tag khusus yang sudah Anda tentukan. Apabila nama class nya berbeda dengan tag khusus yang anda buat maka script tidak akan berfungsi. Silakan script tersebut ditempatkan di dalam postingan artikel, untuk letak bisa di atas artikel atau di bawah artikel, saran saya tempatkan letaknya di bawah artikel supaya tidak tercampur dengan struktur artikel yang sedang Anda buat.

Modifikasi Script Full Otomatis
Script full otomatis di bawah ini perlu sedikit modifikasi yaitu dengan menaruh kode HTML <div class="ads-post"></div> pada penempatan kode iklan, nanti data iklan ditaruh menggunakan script semi otomatis. Jangan lupa agar bisa digunakan pastikan tag khusus pada kode <div class="ads-post"></div> sudah sesuai dengan nama class yang Anda buat apabila Anda memilih Penempatan Iklan Ditengah Artikel Dengan Cara Kombinasi. Oke langkah selanjutnya tinggal memilih script full otomatis yang akan digunakan.

Modifikasi Script Menggunakan Cara 1

<div expr:id='&quot;middle-ads1&quot; + data:post.id'/>
<div id='middle-ads' class='middle-ads'>
<div class='ads-post'></div>
</div>
<div expr:id='&quot;middle-ads2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
function insertMiddleAds(){
var obj0=document.getElementById(&quot;middle-ads1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;middle-ads2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
}
insertMiddleAds();
</script>

Jangan lupa script diatas harus disesuaikan dengan tag khusus yang sudah Anda tentukan. Apabila nama class nya berbeda dengan tag khusus yang anda buat maka script tidak akan berfungsi. Silakan script tersebut ditaruh pada kode HTML template blog.

Modifikasi Script Menggunakan Cara 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='middle-ads' id='middle-ads' itemprop='articleBody'>
<data:post.body/>
</div>
<div class='inline_middle_ads' id='inline_middle_ads'>
<div class='ads-post'></div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);}
}
var middleads = document.getElementById(&quot;inline_middle_ads&quot;);
var target = document.getElementById(&quot;middle-ads&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);
if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);
if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);
if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

Jangan lupa script diatas harus disesuaikan dengan tag khusus yang sudah Anda tentukan. Apabila nama class nya berbeda dengan tag khusus yang anda buat maka script tidak akan berfungsi. Silakan script tersebut ditaruh pada kode HTML template blog.

#4 Penempatan Iklan Lebih Dari Satu Slot Iklan


Cara Penempatan Iklan Lebih Dari Satu Slot Iklan maksudnya adalah menampilkan Iklan ditengah postingan artikel lebih dari satu iklan secara otomatis (penggunaan kata slot maksudnya kode tayang iklan). Pemasangan yang lebih dari satu iklan didalam postingan artikel secara otomatis memerlukan modifikasi khusus dari script full otomatis. Sebenarnya tampilannya tidak benar-benar ditengah artikel namun posisi iklan akan terdistribusi di dalam paragraf artikel. Banyaknya slot bisa Anda atur sendiri bisa dua slot, tiga slot atau empat slot, meskipun bisa lebih dari empat slot namun tetap harus dibatasi agar tidak terlalu menggangu ketika pengunjung blog sedang membaca artikel di blog Anda.

Sebelum menggunakan script ini pastikan semua artikel pada blog Anda memiliki paragraf yang banyak minimal 10 paragraf, apabila kurang dari 10 paragraf maka tampilan iklan akan terlihat menumpuk dan merusak tampilan struktur artikel yang ada. Tapi jika tidak ada masalah dengan tampilan struktur artikel maka silakan saja digunakan cara ini.

Cara Pemasangan Script Untuk Iklan Lebih Dari Satu Slot

  • Silakan login dahulu ke blog Anda.

  • Klik tombol Tema untuk masuk ke tema editor.


  • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


  • Geser scrollbar ke posisi paling bawah.


  • Cari kode <data:post.body/> kemudian ganti dengan script full otomatis baik cara 1 ataupun cara 2. Pilih dan gunakan script tersebut salah satu aja. Dikarenakan kode template blogspot yang digunakan berbeda-beda, maka kode <data:post.body/> pada template blogspot biasanya terdapat lebih dari satu, bisa dua sampai empat. Silakan di coba mengganti kode tersebut satu persatu kemudian lihat hasilnya, jangan merubah semua kode <data:post.body/> ini karena tampilan blog Anda bisa berantakan. Satu persatu di coba aja dulu apabila sudah tampil iklannya sesuai yang diinginkan berarti kode tersebut yang hanya perlu diganti. Saran saya coba mengganti kode dari posisi kode <data:post.body/> ini yang paling akhir, biasanya sih yang terakhir yang menampilkan postingan artikel.

    Pastikan Anda sudah mem-backup kode HTML template blog sebelum melakukan proses trial and error (coba-coba) ini, karena untuk menghindari kemungkinan terjadinya kerusakan pada kode HTML template blog Anda.

  • Mengganti kode <data:post.body/> ini dengan script dibawah ini.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='artbody'><data:post.body/></div>
    <div class='middleAds ads_middle' id='middleAds1'>
    <div style='clear:both;'>
    KODE IKLAN 1 ANDA YANG SUDAH DI PARSE
    </div>
    </div>
    <div class='middleAds ads_middle2' id='middleAds2'>
    <div style='clear:both;'>
    KODE IKLAN 2 ANDA YANG SUDAH DI PARSE
    </div>
    </div>
    <div class='middleAds ads_middle' id='middleAds3'>
    <div style='clear:both;'>
    KODE IKLAN 3 ANDA YANG SUDAH DI PARSE
    </div>
    </div>
    <div id='tgtPost'><data:post.body/></div>
    <script type='text/javascript'>
    function insertAfter(addition,target) {
    var prt = target.parentNode;
    if (prt.lastChild == target) {prt.appendChild(addition);}
    else {prt.insertBefore(addition,target.nextSibling);}}
    var target = document.getElementById(&quot;tgtPost&quot;);
    var midAd1 = document.getElementById(&quot;middleAds1&quot;);
    var midAd2 = document.getElementById(&quot;middleAds2&quot;);
    var midAd3 = document.getElementById(&quot;middleAds3&quot;);
    var showAd1 = target.getElementsByTagName(&quot;br&quot;);
    var showAd2 = target.getElementsByTagName(&quot;p&gt;&quot;);
    var showAd3 = target.getElementsByTagName(&quot;p&gt;&quot;);
    if (showAd1.length &gt; 0) {insertAfter(midAd1,showAd1[3]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd1,showAd2[3]);}
    if (showAd3.length &gt; 0) {insertAfter(midAd1,showAd3[3]);}
    if (showAd1.length &gt; 0) {insertAfter(midAd2,showAd1[8]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd2,showAd2[8]);}
    if (showAd3.length &gt; 0) {insertAfter(midAd2,showAd3[8]);}
    if (showAd1.length &gt; 0) {insertAfter(midAd3,showAd1[13]);}
    if (showAd2.length &gt; 0) {insertAfter(midAd3,showAd2[13]);}
    if (showAd3.length &gt; 0) {insertAfter(midAd3,showAd3[13]);}
    </script>
    </b:if>

    KETERANGAN :
    Kode script di atas merupakan kode untuk memasang 3 slot iklan, apabila ingin menggunakan lebih dari 3 slot iklan maka silakan disesuaikan kodenya.

    Apabila ada tampilan iklan yang tumpang tindih, silakan atur kode CSS untuk class middleAds dengan membuat aturan class seperti berikut ini.

    <style>
    .middleAds{display:block;margin:15px auto;padding:0;width:100%;height:auto;overflow:hidden;text-align:center}
    </style>

    Berikut kode pengaturan tampilan iklan terhadap paragraf artikel yang bisa dimodifikasi apabila tampilan iklan terlihat saling berdekatan.

    if (showAd1.length > 0) {insertAfter(midAd1,showAd1[3]);}
    if (showAd2.length > 0) {insertAfter(midAd1,showAd2[3]);}
    if (showAd3.length > 0) {insertAfter(midAd1,showAd3[3]);}
    if (showAd1.length > 0) {insertAfter(midAd2,showAd1[8]);}
    if (showAd2.length > 0) {insertAfter(midAd2,showAd2[8]);}
    if (showAd3.length > 0) {insertAfter(midAd2,showAd3[8]);}
    if (showAd1.length > 0) {insertAfter(midAd3,showAd1[13]);}
    if (showAd2.length > 0) {insertAfter(midAd3,showAd2[13]);}
    if (showAd3.length > 0) {insertAfter(midAd3,showAd3[13]);}

    * Angka pada kode [3] untuk mengatur paragraph tampil slot iklan pertama.
    * Angka pada kode [8] untuk mengatur paragraph tampil slot iklan kedua.
    *Angka pada kode [13] untuk mengatur paragraph tampil slot iklan ketiga.
    * Perhatikan ! semakin besar nilai angka yang Anda berikan, maka semakin ke bawah iklan akan ditampilkan.

    Cara Penempatan Iklan Lebih Dari Satu Slot Iklan cenderung menampilkan iklan mengikuti paragraph didalam artikel. Silakan diperhatikan penggunaan banyaknya paragraf pada artikel Anda agar script di atas bisa fleksibel dalam menampilkan tayangan iklan disemua artikel blog Anda.

  • Klik "Save" dan lihat hasilnya pada postingan artikel Anda.


#5 Penempatan Iklan Dengan Tampilan Acak


Cara Penempatan Iklan Dengan Tampilan Acak maksudnya adalah menampilkan Iklan ditengah postingan artikel dengan kode iklan yang bisa berganti-ganti lebih dari satu kali menggunakan tempo waktu. Jadi misalkan per 10 detik iklan pertama akan berganti dengan sendirinya menjadi iklan kedua pada posisi iklan yang sama. Sebagai contoh seperti iklan yang terlihat di bawah ini.



Cara Pemasangan
Cara pemasangan Penempatan Iklan Dengan Tampilan Acak hampir sama dengan cara full otomatis, yaitu ditaruh pada kode HTML template blog dan mengganti kode <data:post.body/> dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='middle-ads' id='middle-ads' itemprop='articleBody'>
<data:post.body/>
</div>
<div class='inline_middle_ads' id='inline_middle_ads'>
<div id='middle-ads0' style="display:none;">
KODE IKLAN 1 ANDA YANG SUDAH DI PARSE
</div>
<div id='middle-ads1' style="display:none;">
KODE IKLAN 2 ANDA YANG SUDAH DI PARSE
</div>
<div id='middle-ads2' style="display:none;">
KODE IKLAN 3 ANDA YANG SUDAH DI PARSE
</div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);}
}
var middleads = document.getElementById(&quot;inline_middle_ads&quot;);
var target = document.getElementById(&quot;middle-ads&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);
if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);
if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);
if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
var nrandom = Math.floor(Math.random()*4);
$("#middle-ads"+nrandom).slideDown(2500);
function setRandomAdsHeader(){
nrandom = Math.floor(Math.random()*4);
if(nrandom==0){
$("#middle-ads1").slideUp(2500);
$("#middle-ads2").slideUp(2500);
$("#middle-ads0").delay(2500).slideDown('slow');
}
if(nrandom==1){
$("#middle-ads0").slideUp(2500);
$("#middle-ads2").slideUp(2500);
$("#middle-ads1").delay(2500).slideDown('slow');
}
if(nrandom==2){
$("#middle-ads0").slideUp(2500);
$("#middle-ads1").slideUp(2500);
$("#middle-ads2").delay(2500).slideDown('slow');
}
}
var myAdsHeaderInterval = setInterval(function(){setRandomAdsHeader();},10000);
</script>
</b:if>

KETERANGAN
  • Kode di atas digunakan untuk tiga slot iklan dengan penempatan posisi yang sama. Iklan yang ditampilkan akan secara random ditampilkan berdasarkan jeda waktu tertentu.
  • Pada kode var nrandom = Math.floor(Math.random()*4); angka 4 berarti jumlah slot iklan yang ditayangkan dikurangi 1 (3 slot iklan), karena kode random pada Javascript menghitung angka mulai dari angka 0 sehingga untuk menggunakan kode random jumlah angka yang akan digunakan harus ditambah dengan 1. Apabila hanya menggunakan 2 slot iklan maka angka 4 tersebut harus diganti dengan angka 3.
  • Apbila ada penambahan atau pengurangan slot iklan maka tinggal menambahkan atau mengurangi elemen dan kode script di atas.
  • Pada kode var myAdsHeaderInterval = setInterval(function(){setRandomAdsHeader();},10000); angka 10000 merupakan jeda waktu yang digunakan yaitu 10000 mili detik atau 10 detik. Silakan Anda sesuaikan jeda waktu tersebut apabila ingin menyesuaikan jeda waktu yang diinginkan. Jeda waktu dalam Javascript secara default menggunakan satuan mili detik.

#6 Bonus [ Tampilan Iklan Dengan Cara Parallax Scroll ]


Pengertian Parallax Scroll dalam design website adalah pergerakan antara dua atau lebih obyek elemen HTML pada posisi yang sama yang mana objek pertama atau latar paling belakang bergerak lebih lambat ketika di scroll dari obyek elemen HTML yang berada didepannya begitu juga dengan elemen berikutnya. Efek yang terlihat dari pergerakan ini dinamakan dengan Parallax Scrolling.

Parallax Scrolling bisa juga diterapkan sebagai efek dalam menampilkan iklan di blog, sehingga tampilan iklan akan terlihat lebih hidup dan menarik. Cara ini juga merupakan salah satu trik untuk membuat pengunjung merasa penasaran dengan iklan yang ditampilkan. Tampilan iklan yang menarik akan memperbesar peluang dari iklan tersebut untuk diklik oleh pengunjung. Sebagai contoh efek parallax scroll apabila digunakan sebagai efek tampilan iklan bisa dilihat pada contoh dibawah ini.

...
Pada contoh disamping kiri merupakan efek tampilan iklan menggunakan parallax scroll. Efek tersebut terlihat seperti kotak kosong dengan tampilan gambar yang berada dibelakang kotak kosong tersebut. Ketika di-scroll gambar latar belakang akan diam kemudian kotak di depan gambar akan bergerak membuat gambar latar semakin jelas terlihat ketika artikel semakin bergerak ke atas. Iklan parallax disamping menggunakan kode tayang iklan berukuran 300x600 px karena menurut admin penggunaan parallax scrolling lebih optimal apabila menggunakan iklan dengan dimensi 300x600 px, akan tetapi iklan dengan ukuran lain masih bisa dipasang, tinggal memodifikasi kode CSS saja apabila menggunakan ukuran lainnya.

Cara Pemasangan Kode Parallax Scroll
Kode untuk Tampilan Iklan Dengan Cara Parallax Scroll ini menggunakan kode yang sering digunakan para blogger dan situs besar yang menggunakan efek parallax scroll dalam menampilkan tayangan iklan berbasis parallax. Berikut kode umum parallax scroll yang sering digunakan dalam menampilkan tayangan iklan.

Cara Pemasangan Kode untuk parallax scroll hampir sama dengan hampir sama dengan cara full otomatis, yaitu ditaruh pada kode HTML template blog dan mengganti kode <data:post.body/> dengan kode di bawah ini.


Oke sobat blogger semoga informasi yang admin berikan bisa memberikan manfaat yang positif. Mohon diperhatikan bahwasannya admin hanya memberikan informasi berdasarkan pengalaman dan hasil praktek sendiri. Adapun penggunaan informasi dari artikel yang admin berikan merupakan tangggungjawab pembaca sendiri baik segala resiko ataupun manfaat yang didapatkan.

Sampai bertemu lagi pada postingan artikel berikutnya. Akhir kata Semoga Bermanfaat.

-Fin-

Keyword


Adsense, Google, AdVertisement, Ads, In-Ads, Middle, Middle-Ads, How-to, Cara, Pasang, Memasang, Iklan, Ditengah, Artikel, Blog, Blogger, Blogspot, Sponsor, Metode, Solusi, Lengkap, Script, Javascript, JQuery, Code, HTML, CSS, Responsif, Kode, Jasa, Layanan, Service, Payperclick, CPM, Optimasi, Post, Posting, Otomatis, Auto, Advertising, Online, Parse, Ad-code, CPC, PPC

Incoming Search Term


Memasang Iklan Ditengah Artikel, Cara Pasang Iklan Ditengah, Iklan In-Ads Tengah Postingan Artikel Blogger, Solusi Iklan Blogger Tengah Artikel, Script Iklan Ditengah Artikel, Kode Iklan Ditengah Blogspot, Pasang Iklan Sponsor Pada Tengah Artikel, Rahasia Meningkatkan Pendapatan Dengan Iklan Ditengah Artikel Blog, Tutorial Memasang Script Iklan Otomatis Ditengah Artikel, Otomatis Iklan Tengah Artikel, Ads Middle Article, Middle Ads On Blog Post, Cara Mudah Pasang Iklan Ditengah Artikel Blog, Kode Pasang Iklan Jitu Ditengah Artikel, Cara Ampuh Memasang Iklan Ditengah Artikel, In Ads Article Blog Post, Cara Beda Memasang Iklan Ditengah Artikel, Iklan Parallax Adsense, Adsense Ditengah Artikel, Google Adsense Didalam Artikel, Iklan Adsense di Dalam dan Di Atas Artikel, Kode adsense untuk ads di tengah artikel, Ads Tengah Selain Adsense, Sponsor Ads Middle Article
edit Tags: Adsense, Tips&Trick

Related Solusi Terbaik Cara Pasang Iklan Ditengah Artikel Blog:

LihatTutupKomentar