Cara memasang 5 iklan dalam artikel
Blog kak Ryan - memasang iklan pada setiap artikel secara manual sangatlah tidak praktis. Saya pernah melakukanya ketika baru pertamakali dierima Mgid. Memasang kode iklan setiap menulis blog menjadi alternatif saya sebab jika dipasang pada menu tata letak blogger sering kali iklan tidak tayang. Tapi sekarang blogger sudah mensupport iklan mgid, sehingga sobat bisa memasang iklan melalui tata letak blogger.
Yang menjadi masalah adalah bagaimana caranya menyisipkan iklan ditengah artikel secara otomatis. Saya yakin pasti sobat kepikiran pengan buat kan? Hehehe, tapi hal ini tidak berlaku bagi pengguna template mas sugeng.
Sebab hampir semua template yang dibuat oleh mas sugeng sudah dilengkapi slot iklan. Sehingga sobat tidak perlu lagi mengatur posisi iklan pada blog sobat. Kode ini tersendiri saya dapatkan dari kodenya template VioMagz buatan mas sugeng, dan sudah saya aplikasikan ke blog ini.
Jika sobat lihat blog saya ini, terpasang 3 iklan pada artikel. Dan khusus iklan bawah judul sengaja saya kosongkan hitung-hitung tempat persembunyian iklan sticky 😂😂😂
Ya, biasanya kan banyak pengunjung yang tidak suka iklan. Saya tempatkan tombol x di pojok iklan sticky, biar gak hilang iklanya saya pindahin ke bawah judul. Kalau nggak percaya, coba deh klik aja tombol x nya😂🤣
Baca juga : Cara mematikan tombol back pada browser agar pengunjung tak kabur
Lanjut ke topik, sebelum memasang kode ini terlebih dahulu teman-teman memahami kode HTML dasar dan struktur template blogger. Karena saya tidak akan mengajarkan bagaimana menerapkanya pada blogger, saya hanya berbagi kode HTML dan JavaScript saja.
Cara memasang iklan
Pastikan sobat memasukan artikel ke dalam sebuah div. Misalnya keseluruhan teks artikel kita masukan ke dalam div denga id body-post it. Lihat kode berikut ini, saya menulis teks dummy dalam sebuah div.:<div id="body-post-it">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br/>
<br/>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<br/>
<br/>
In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
<br/>
<br/>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
<br/>
<br/>
Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
<br/>
<br/>
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</div>Selanjutnya pasang kode ini dibawah artikel. Fungsi dari kode ini adalah untuk menyimpan iklan sementara sebelum disisipkan ke dalam artikel dengan menggunakan bantuan javascript.
<div id="iklan-atas">
Pasang Iklan atas disini
</div>
<div id="iklan-tengah1">
Pasang iklan tengah
</div>
<div id="iklan-tengah2">
Pasang iklan tengah
</div>
<div id="iklan-bawah">
Iklan bawah
</div>
Langkah terakhir adalah memasang javascript, kodenya sederhana. Fungsi dari kode ini untuk memindahkan elemen dom (div) dan menyispkanya ke dalam artikel pada tempat yang sudah ditentukan. Kalau sobat pernah belajar javascript node.js pasti paham arti dasar dari kode ini.
<script type="text/javascript">
function insertAfter(addition, konten) {
var parent = konten.parentNode;
if (parent.lastChild == konten) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition, konten.nextSibling);
}
}
function insertAbove(addition, konten) {
var parent = konten.parentNode;
parent.insertBefore(addition, konten);
}
function insertBellow(addition) {
var parent = konten;
parent.appendChild(addition);
}
var iklan1 = document.getElementById("kode-iklan-tengah1");
var iklan2 = document.getElementById("kode-iklan-tengah2");
var iklanAtas = document.getElementById("kode-iklan-atas");
var iklanBawah = document.getElementById("kode-iklan-bawah");
var konten = document.getElementById("body-post-it");
var lokasi = konten.querySelectorAll("br,p,div > br,div > div > br,div > div > div > br,div > p,div > div > p,div > div > div > p,span > br, span > p");
if (lokasi.length > 0) {
insertAbove(iklanAtas,konten);
insertBellow(iklanBawah);
}
if (lokasi.length > lokasiIklanTengah1) {
insertAfter(iklan1,lokasi[lokasiIklanTengah1]);
}
else {
iklan1.innerHTML = "";
}
if (lokasi.length > lokasiIklanTengah2) {
insertAfter(iklan2,lokasi[lokasiIklanTengah2]);
}
else {
iklan2.innerHTML = "";
}
</script>Memanipulasi halaman dengan javascript sudah saya lakukan sejak tahun 2014 lalu. Hanya saja saya belum begitu menguasai teknik pemrograman javascript. Javascript berbeda dengan PHP, skrip bahasa java jauh lebih berorientasi terhadap objek.
Baca juga : Cara pasang iklan tetap bar bawah adsense pada blogger dan web lain
Selain itu skrip dalam javascript banyak dibuat sebagai fungsi-fungsi khusus, salah satu contoh javasript library yang paling lengkap fungsinya adalah Jquery. Skrip Jquery terdiri dari ribuan fungsi untuk mempersingkat penulisan dalam skrip-skrip dasar.
Mungkin ada yang tanya kenapa kak Ryan belajar javascript? Salah satu alasanya karena saya ngeblog di blogger. Seperti yang temen-temen ketahui blogger terdiri dari 40% bahasa javascript.
Hampir semu elemen pembentuk web dinamis blogger menggunakan javascript contohnya: form komentar, witget kontak, postingan terkait, halaman responsive, navbar blogger, dan masih banyak lagi hampir semua elemen dibentuk oleh javascript.
Tanpa sentuhan javascript blogger bakalan mirip situs mati tanpa gerak. Jika tema-teman lihat saya menggunaka javascript untuk membuat sidebar yang dinamis, membuat tombol show hide iklan sticky, tombol load disqus. Sebenarnya masih banyak lagi, tapi saya kurangin karena memberatkan halaman. Semua javascript yang saya tempatkan disini akan muncul pada tampilan desktop. Baca juga : Cara membuat iklan melayang mgid untuk meningkatkan pendapatan