Cara membuat iklan melayang mgid untuk meningkatkan pendapatan
Situs mgid sendiri sebenarnya sudah ada iklan melayang atau yang kita sebut iklan hamparan layar (iklan overlay). Hanya saja iklan tersebut desainya kurang enak dilihat dan menurut saya terlalu banyak witget yang tampil, selain itu bisa membuat loading halaman lebih berat.
Disini saya juga akan bagikan kode skrip lazyload khusus untuk mgid dengn cara kerjanya yaitu menampilkan iklan saat halaman di scroll. Cara ini sudah saya coba di blog kak ryan ini, dan mampu mempercepat loading halaman.
Asao usul kode iklan
Sebelumnya saya ceritakan terlebih dahulu asal mula saya membuat kode ini, dan mengapa demikian. Sebenarya saya sering kali terinpirasi dari berbagai hal yang saya lihat diinternet. Berhubungan dengan saya menggunakan kartu prabayar indosat oreedo, saat saya browsing menggukan kuota dari kartu tersebut pihak ISP indosat gencar sekali memasang iklan melayang pada situs orang lain yang tidak dilengkapi dengan keamanan ssl.
Sudah saya selidiki bagaimana cara kerjanya, pihak isp akan meredirect pengunjung yang membuka website tanpa dilengkapi ssl (https) ke situs https://ads.indosatoreedo.com dan disanalah mereka menginjeksikan iklan hamparan layar beberapa detik sebelum kita diredirect ke situs aslinya.
Saya sudah kesal karena sering terganggu dengan iklan tersebut, bahkan saya malahan sering tidak sengaja mengklik iklan ads dari operator, mereka menggunakan iklan google adsense yang menggunakan cmd, kemudian iklan mgid, lalu iklan daris situs lainya pokonya iklanya berganti-ganti.
Dan dari sanalah saya merancang kode ini, sebenarnya saya tidak membuatnya dari nol. Akan tetapi mengambil berbagai kode yang sudah jadi kemudian saya gabungkan jadi satu, misalnya kode border, kode memindahkan div dan sebagainya.
Cara kerja dari iklan ini adalah, setelah halama diload dan setelah 6 detik, maka iklan hamparan layar akan muncul tepat ditengah-tengah layar. Dengan desain yang enak dilihat serta dilengkapi dengan tombol close agar pengunjung bisa menghilangkanya dengan cepat, tidak seperti ads operator.
Lalu setelah 10 detik dibiarkan begitu saja, maka iklan ini akan hilang secara sendirinya. Saya menggunakan javascript untuk memindahkan iklan yang sudah kita tempatkan pada bagian halaman ke hamparan layar.
Jika kalian mencari di blog lain, kalian tidak akan menemukan kode ini. Hanya di blog ini adanya. Saya buat sendiri, jika ada di blog lain berati mereka cops skrip saya tanpa izin, suatu saat pasti saya takedown kecuali mereka memberikan link refernsi sumbernya. (Buat menghargai author 😀😁).
Oke baiklah lanjut ke pemasangan, pastikan kalian memahami dasar-dasar HTML dan javascript. Langkah pertama buatlah iklan sidebar pada mgid, mau iklan sidebar ataupun bottom artikel yang penting kamu tidak mengnutupi layar penuh. Cukup pakai satu kolom witget saja, kalau belum tahu jenis iklanya seperti apa kamu bisa lihat gambar dibawah ini.
Setelah membuat iklan, maka kamu salin kodenya dan kode iklan akan terlihat seperti yang tunjukan pada box dibawah ini. Perhatikan bagian yang saya beri warna akan saya jelaskan nanti, yang penting kamu memahaminya dulu ya.
Itu yang kasih teks warna merah adalah javascript mgid yang sering bikin website kita lambat diakses, maka kita mengatasinya dengan membuat payload atau biasa kita sebut lazyload mgid. Biasanya setiap kode iklan mgid itu memiliki javascript yang berbeda-beda, kita tidak bisa menggabungkanya karena id unik di setiap js. Dan sebagai contoh saya akan membuat satu saja lazyloadnya, silakan teman teman hapus kode sktip js diatas yang berwarna merah itu. Kemudian buatlah kode lazyload seperti yang saya contohkan dibawah ini, jangan lupa gunakan link js yang sama :
Untuk kode lazyload kamu bisa simpan atau tempatkan pada bagian bawah halaman, sebelum tag </body> atau boleh juga tempel langsung ke bagian tata letak witget. Nah selanjutnya kamu salin kode css ini, ke template blog kamu. Letak di <b:skin>, tempatin aja dibagian bawahnya sebelum tag </b:skin> atau kamu bisa membuat style sendiri langsung dengan menambahkan tag <style> kode css</style> dengan begitu kamu bebas mau ditempatkan di template atau di tata letak witget.
Oke kalau udah kita lanjut ke tahap selanjutnya, kamu harus mempunyai ruang buat menempatian iklan sebelum kita jadikan iklan melayang. Kode ini boleh kamu tambahkan ke sidebar baik melalui menu witget atau langsung edit HTML, perhatikan kode yang saya berikan warna kuning adalah kode iklan kamu sama seperti diatas.
Tahap terakhir yaitu kita harus memasang delay waktu kapan kita kan menampilkan iklan dan kapan kita akan menghilangkan iklan. Kodenya sudah saya rangkai seperti yang ada dibawah ini, dan sekali lagi saya ingatian perhatikan kode yang saya beri warna. Js dibawah ini boleh kamu tempatkan dimana saja, tapi lebih baik letakan pada witget footer atau pasa html template tepatnya sebelum kode </body>
Penjelasan kode diatas:
Semua waktu berjalan dari nol ya teman-teman, diatas kita menggunakan timer dengan fungsi setTimeOut(). fungsi ini menggunakan waktu satuan mili detik, jadi kalian harus menggunakan satuan mili detik untuk mengatur waktunya. Seperti diatas saya akan menampilkan iklan melayang setelah 6000 mili detik atau setara dengan 6 detik setelah halama dimuat. Kemudian saya akan menghilangkan iklanya setelah 15.000 mili detik atau setara dengan 15 detik. Karena waktunya sama-sama dihitung dari nol artinya iklan diatas hanya tampil selama 9000 milidetik atau 9 detik sebelum akhirnya kembali pada tempatnya (Menghilang dari layangan).
Cara kerja kode diatas adalah dengan menambahkan kelas css baru dalam sebuah div selama beberapa saat dan kemudian menghapus kelasnya. Kita menggunakan timet setTimeOut yang sama-sama hitunganya dimulai saat halaman sudah dimuat.
Saya rasa kode tersebut tidak melanggar kebijakan mgid hanya saja jika kita menampilkanya terlalu cepat akan menggangu pengunjung dan membuatnya tidak nyaman. Maka saya sarankan agar kamu memberi waktu muncul iklan selama 25 detik (25000milidetik) dan kemudian menghilangkanya setelah lewat dari 35 detik (350000). Ya memang cukup lama, ini hanya akan muncul jika pengunjung bertahan selama 30 detik di situs kamu, dan itu tidak akan mengganggu pengungjung karena rata-rata biasanya visitor itu hanya memakan waktu kurang dari 10 deti di situs kita, biasanya sih.
Disini saya juga akan bagikan kode skrip lazyload khusus untuk mgid dengn cara kerjanya yaitu menampilkan iklan saat halaman di scroll. Cara ini sudah saya coba di blog kak ryan ini, dan mampu mempercepat loading halaman.
Asao usul kode iklan
Sebelumnya saya ceritakan terlebih dahulu asal mula saya membuat kode ini, dan mengapa demikian. Sebenarya saya sering kali terinpirasi dari berbagai hal yang saya lihat diinternet. Berhubungan dengan saya menggunakan kartu prabayar indosat oreedo, saat saya browsing menggukan kuota dari kartu tersebut pihak ISP indosat gencar sekali memasang iklan melayang pada situs orang lain yang tidak dilengkapi dengan keamanan ssl.
Sudah saya selidiki bagaimana cara kerjanya, pihak isp akan meredirect pengunjung yang membuka website tanpa dilengkapi ssl (https) ke situs https://ads.indosatoreedo.com dan disanalah mereka menginjeksikan iklan hamparan layar beberapa detik sebelum kita diredirect ke situs aslinya.
Saya sudah kesal karena sering terganggu dengan iklan tersebut, bahkan saya malahan sering tidak sengaja mengklik iklan ads dari operator, mereka menggunakan iklan google adsense yang menggunakan cmd, kemudian iklan mgid, lalu iklan daris situs lainya pokonya iklanya berganti-ganti.
Dan dari sanalah saya merancang kode ini, sebenarnya saya tidak membuatnya dari nol. Akan tetapi mengambil berbagai kode yang sudah jadi kemudian saya gabungkan jadi satu, misalnya kode border, kode memindahkan div dan sebagainya.
Cara kerja dari iklan ini adalah, setelah halama diload dan setelah 6 detik, maka iklan hamparan layar akan muncul tepat ditengah-tengah layar. Dengan desain yang enak dilihat serta dilengkapi dengan tombol close agar pengunjung bisa menghilangkanya dengan cepat, tidak seperti ads operator.
Lalu setelah 10 detik dibiarkan begitu saja, maka iklan ini akan hilang secara sendirinya. Saya menggunakan javascript untuk memindahkan iklan yang sudah kita tempatkan pada bagian halaman ke hamparan layar.
Jika kalian mencari di blog lain, kalian tidak akan menemukan kode ini. Hanya di blog ini adanya. Saya buat sendiri, jika ada di blog lain berati mereka cops skrip saya tanpa izin, suatu saat pasti saya takedown kecuali mereka memberikan link refernsi sumbernya. (Buat menghargai author 😀😁).
Oke baiklah lanjut ke pemasangan, pastikan kalian memahami dasar-dasar HTML dan javascript. Langkah pertama buatlah iklan sidebar pada mgid, mau iklan sidebar ataupun bottom artikel yang penting kamu tidak mengnutupi layar penuh. Cukup pakai satu kolom witget saja, kalau belum tahu jenis iklanya seperti apa kamu bisa lihat gambar dibawah ini.
Setelah membuat iklan, maka kamu salin kodenya dan kode iklan akan terlihat seperti yang tunjukan pada box dibawah ini. Perhatikan bagian yang saya beri warna akan saya jelaskan nanti, yang penting kamu memahaminya dulu ya.
<!-- Composite Start -->
<div id="M493082ScriptRootC776604">
</div>
<script src="https://jsc.mgid.com/r/y/ryanjhr350.blogspot.com.778804.js" async>
</script>
<!-- Composite End -->
Itu yang kasih teks warna merah adalah javascript mgid yang sering bikin website kita lambat diakses, maka kita mengatasinya dengan membuat payload atau biasa kita sebut lazyload mgid. Biasanya setiap kode iklan mgid itu memiliki javascript yang berbeda-beda, kita tidak bisa menggabungkanya karena id unik di setiap js. Dan sebagai contoh saya akan membuat satu saja lazyloadnya, silakan teman teman hapus kode sktip js diatas yang berwarna merah itu. Kemudian buatlah kode lazyload seperti yang saya contohkan dibawah ini, jangan lupa gunakan link js yang sama :
<script type='text/javascript'>
//<![CDATA[
// Lazy Load Mgid
var lazymgid=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazymgid||0!=document.body.scrollTop&&!1===lazymgid)&&(!function(){var e=document.createElement('script');e.type='text/javascript',e.async=!0,e.src='https://jsc.mgid.com/r/y/ryanjhr350.blogspot.com.778804.js';var a=document.getElementsByTagName('script')[0];a.parentNode.insertBefore(e,a)}(),lazymgid=!0)},!0);
//]]>
</script>Untuk kode lazyload kamu bisa simpan atau tempatkan pada bagian bawah halaman, sebelum tag </body> atau boleh juga tempel langsung ke bagian tata letak witget. Nah selanjutnya kamu salin kode css ini, ke template blog kamu. Letak di <b:skin>, tempatin aja dibagian bawahnya sebelum tag </b:skin> atau kamu bisa membuat style sendiri langsung dengan menambahkan tag <style> kode css</style> dengan begitu kamu bebas mau ditempatkan di template atau di tata letak witget.
.RyanAH {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: visible; position: fixed; text-align: center; top:20%;left:5%;right:5%; margin:auto; z-index: 999; background-image: none; width:320px; height:324px;
animation: 1s fadeIn; animation-fill-mode: backwards; background-color:#fff;border:2px solid red;border-radius:5px;
}
.btnRyanAH { position: absolute; width: 20px; height: 20px; top: -22px; right: -2px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAL5JREFUOI2l0TsKwlAQheEzLtAmsRF8IO7BwsZlqJ2FLkYUdA2CjeAWjk0uXMfMnUk89Z8vCQP8MZLDSESS00BXN+3LCoTfmxWwtWrfHpY2bsFWRvvQv2ltlHUnp31G0Yrk0WkIAKIP4h3DmojID9gXTVgr2BXNMROMohoDgIGBnQMfNw80AMmbd81sSw+7d8DSJhZ27YGlLTR28Z5outLqhG0iWPby0qoUHSKYh+poH8Es1Ip2EUyjXrSNYNY+UCui/Qn48lcAAAAASUVORK5CYII='); background-size: 10px 10px; background-position: 5px; background-color: #000; color: #fff; background-repeat: no-repeat; box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2); border: none; border-radius: 50%; cursor: pointer; }
.btnRyanAH:before { position: absolute; content: ""; top: -20px; right: 0; left: -20px; bottom: 0; }
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
Oke kalau udah kita lanjut ke tahap selanjutnya, kamu harus mempunyai ruang buat menempatian iklan sebelum kita jadikan iklan melayang. Kode ini boleh kamu tambahkan ke sidebar baik melalui menu witget atau langsung edit HTML, perhatikan kode yang saya berikan warna kuning adalah kode iklan kamu sama seperti diatas.
<div class='' id='AdsRyanAH'>
<!-- Kode iklan silahkan simpan di bawah ini -->
<!-- Composite Start -->
<div id="M493082ScriptRootC776604">
</div>
<button aria-label='Close this ad' class='btnRyanAH' onclick="document.getElementById('AdsRyanAH').style.display='none'"/>
</button></div>Tahap terakhir yaitu kita harus memasang delay waktu kapan kita kan menampilkan iklan dan kapan kita akan menghilangkan iklan. Kodenya sudah saya rangkai seperti yang ada dibawah ini, dan sekali lagi saya ingatian perhatikan kode yang saya beri warna. Js dibawah ini boleh kamu tempatkan dimana saja, tapi lebih baik letakan pada witget footer atau pasa html template tepatnya sebelum kode </body>
<script type="text/javascript">
function showIt() {
var adsyank = document.getElementById('AdsRyanAH');
adsyank.classList.add("RyanAH");
}
function hideIt() {
var adsyank = document.getElementById('AdsRyanAH');
adsyank.classList.remove("RyanAH");
}
setTimeout("showIt()", 6000); // setelah 6 detik
setTimeout("hideIt()", 15000); // setelah 10 detik
</script>Penjelasan kode diatas:
Semua waktu berjalan dari nol ya teman-teman, diatas kita menggunakan timer dengan fungsi setTimeOut(). fungsi ini menggunakan waktu satuan mili detik, jadi kalian harus menggunakan satuan mili detik untuk mengatur waktunya. Seperti diatas saya akan menampilkan iklan melayang setelah 6000 mili detik atau setara dengan 6 detik setelah halama dimuat. Kemudian saya akan menghilangkan iklanya setelah 15.000 mili detik atau setara dengan 15 detik. Karena waktunya sama-sama dihitung dari nol artinya iklan diatas hanya tampil selama 9000 milidetik atau 9 detik sebelum akhirnya kembali pada tempatnya (Menghilang dari layangan).
Cara kerja kode diatas adalah dengan menambahkan kelas css baru dalam sebuah div selama beberapa saat dan kemudian menghapus kelasnya. Kita menggunakan timet setTimeOut yang sama-sama hitunganya dimulai saat halaman sudah dimuat.
Saya rasa kode tersebut tidak melanggar kebijakan mgid hanya saja jika kita menampilkanya terlalu cepat akan menggangu pengunjung dan membuatnya tidak nyaman. Maka saya sarankan agar kamu memberi waktu muncul iklan selama 25 detik (25000milidetik) dan kemudian menghilangkanya setelah lewat dari 35 detik (350000). Ya memang cukup lama, ini hanya akan muncul jika pengunjung bertahan selama 30 detik di situs kamu, dan itu tidak akan mengganggu pengungjung karena rata-rata biasanya visitor itu hanya memakan waktu kurang dari 10 deti di situs kita, biasanya sih.