Jumat, 08 Desember 2017

Menampilkan Iklan di Dalam Artikel secara Otomatis [Work]

Beberapa waktu yang lalu ada seorang sahabat yang melontarkan pertanyaan kepada saya melalui Facebook Chat mengenai Kode JavaScript yang dapat menampilkan Iklan Adsense di Tengah Artikel secara Otomatis.

Karena saat itu saya belum ada tutorialnya, jadi saya sarankan untuk melakukan pencarian di Google dengan Keyword Memasang Iklan Ditengah Postingan.

Trik Iklan di Tengah Artikel

Biasanya Mesin Pencarian Google akan memberikan Puluhan Blog Tutorial berkualitas yang membahas tutorial Menampilkan Iklan di Tengah Artikel.

Nah pada artikel saya kali ini, saya akan memberikan kode JavaScript yang saya gunakan untuk menampilkan Iklan secara otomatis berada di Tengah Artikel.

Yang saya Maksud dari kata Otomatis adalah cara kita menampilkan Iklan tanpa harus menambahkan JavaScript Adsense kedalam Postingan.

Baca juga: Hati-hati Adsense kamu kena Pinalty


Dibawah ini adalah hasil gambar yang saya screenshot dengan menambahkan Kode Adsense ditengah Artikel secara Manual.

Penempatan Iklan Manual di Tengah Artikel

Cara Manual Menampilkan Iklan Adsense seperti gambar diatas akan membuat kita kewalahan ketika membuat sebuah artikel.

Hal sekecil ini juga lah yang menjadi penyebab Beratnya Loading Page lho teman-teman. Karena setiap kali pengunjung membuka artikel kamu, halaman artikel harus melakukan loading untuk memanggil Script Iklan ini Berkali-kali agar iklan tampil.

Kenapa saya bilang berkali-kali ?

Karena seharusnya Kode iklan itu loading bersamaan dengan Template. Sedangkan jika kita meletakkan 1 Script iklan seperti contoh gambar diatas, maka browser akan berkerja lebih keras untuk mengerjakan perintah dari script iklan yang ada dalam artikel juga.

Kamu sudah tahu kan bahwa JavaScript itu memang dapat membebani Loading Page? Kebayang kan jika ada 3 Script iklan yang kita pasang secara manual didalam artikel?

Maka dari itu, saya memberikan Script ini agar kamu tidak pusing meletakkan posisi iklan sesuai keinginan dan lebih fokus dalam membuat menulis.

Baca juga: Mengatur Posisi Iklan Adsense di Homepage


Ohya, Sebenarnya JavaScript ini bukan hanya untuk menampilkan iklan saja yah teman-teman tapi bisa juga Related Post, atau Banner Promotion dan masih banyak lagi kegunaannya.

Script dibawah ini adalah cara menampilkan Iklan ditengah Artikel Secara Otomatis. Cukup dengan 1 Script Otomatis ini, kamu bisa menampilkan 1-5 Unit Iklan di dalam artikel secara otomatis.

<div style="float:left; margin-left:0px;margin-right:20px;margin-bottom:15px">
UNIT IKLAN 300X250 
</div>
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>
<br/>
UNIT IKLAN
<br/>
UNIT IKLAN
<br/>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(1,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);}
</script>
<br/>
UNIT IKLAN
<br/>
UNIT IKLAN

Perhatikan pada kode diatas, saya menyisipkan 5 Unit iklan yang di load secara bersamaan. Kamu bisa sesuaikan dengan jumlah kata didalam setiap artikel kamu, jika artikel yang kamu buat rata-rata hanya 500 kata, maka saya sarankan hanya menampilkan 3 Unit iklan saja.

Angka 2 pada kode diatas menandakan bahwa iklan akan tampil di pertengahan artikel secara otomatis. Kamu dapat merubah angka tersebut agar lokasi iklannya sesuai dengan keinginan kamu.

Kalau saya sendiri sih masih menggunakan JavaScript diatas. Dan hasilnya, bisa teman-teman lihat di beberapa artikel blog ini termasuk pada artikel ini yah.

Ohya, sampai lupa saya menjelaskan cara menyisipkan Script diatas kedalam template. Perhatikan beberapa langkah dibawah ini ya teman-teman.
  • Pastikan kamu sudah membuka halaman EDIT HTML pada dashboard blog
  • Cari Kode <data:post.body/> dengan cara klik tombol CTRL + F
  • Karena pada custom template kita akan menemukan lebih dari 1 buah kode <data:post.body/>, jadi kamu harus teliti dalam mempraktekkannya.
  • Setelah itu, silahkan ganti kode <data:post.body/> dengan kode yang sudah kamu salin dari kolom diatas.
  • Simpan Template, lalu lihat hasilnya.

Saran saya, jangan dulu kamu masukkan Script Iklan kedalam Kode JavaScript yang saya berikan diatas. Ini gunanya supaya kamu bisa preview lebih dulu hasil dari script yang saya bagikan.

Karena tidak semua custom template akan cocok dengan JavaScript yang saya bagikan, terkadang akan muncul kode-kode HTML dari sebuah gambar yang kamu sisipkan kedalam artikel hingga gambarnya jadi tidak tampil.

Baca juga: Cara Buat Random Banner ukuran 468x60


Nah jika ada kesulitan dalam mempraktekkan tutorial diatas, jangan sungkan untuk bertanya melalui kolom komentar dibawah ini. Jangan lupa untuk berlangganan artikel blog ini supaya tidak kamu dapat notifikasi ketika saya posting artikel lagi.

Semoga Bermanfaat

4 komentar:

  1. Java scrip ini yang dicari untuk memasang iklan d blog sya

    BalasHapus
    Balasan
    1. iya mas.. silahkan di coba dulu script dari tutorial diatas

      Hapus
  2. Sayangnya trik ini gak bisa saya terapkan di template blog saya.. mungkin kurang cocok jadinya iklan muncul cuma setengahnya heheh.. terimakasih banyak atas informasinya ya kang :)

    BalasHapus
    Balasan
    1. Pakai Template Arlina kan mas?
      Bisa kok mas.. ini juga kan pakai template dari Arlina.

      Hapus