Cara Membuat Iklan mgid hamparan layar Untuk meningkatkan pendapatan (iklan overlay) - masandri
Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Iklan mgid hamparan layar Untuk meningkatkan pendapatan (iklan overlay)

centerklik.com

Situs mgid sendiri sebenarnya sudah ada iklan melayang atau yang kita sebut iklan hamparan layar (iklan overlay). Hanya saja iklan tersebut desainnya kurang enak dilihat dan menurut saya terlalu banyak widget yang tampil, selain itu bisa membuat loading halaman sangat berat.

Disini saya juga akan bagikan kode skrip lazyload khusus untuk mgid dengan cara kerjanya yaitu menampilkan iklan saat halaman di scroll. Cara ini sudah saya coba di blog masandri.org ini. Dan mampu mempercepat loading halaman.

Asal usul kode ikKlan

Sebelumnya saya ceritakan terlebih dahulu asal mula saya membuat kode ini, dan mengapa demikian. Sebenarnya saya sering kali terinspirasi dari berbagai hal yang saya lihat di internet. Berhubungan dengan saya menggunakan kartu prabayar indosat oreedo, saat saya browsing menggunakan 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 dari situs lainnya pokoknya iklannya 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 halaman 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 anda mencarai di blog lain, anda tidak akan menemukan kode ini. Hanya di blog ini adanya. Saya buat sendiri, jika ada diblog lain berarti mereka copy paste script saya tanpa izin, suatu saat pasti saya takedown kecuali mereka memberikan link referensi sumbernya. (Buat menghargai author).

Oke baiklah lanjut ke pemasangan, pastikan anda memahami dasar-dasar HTML dan JavaScript. Langkah pertama buatlah iklan sidebar pada mgid, mau iklan sidebar ataupun bottom artikel yang penting anda tidak menutupi layar penuh. Cukup pakai satu kolom widget saja, kalau belum tahu jenis iklannya seperti apa anda bisa lihat gambar di bawah ini.


Setelah membuat iklan, maka anda salin kodennya dan kode iklan akan terlihat seperti yang tunjukan pada box di bawah ini. Perhatikan bagian yang saya beri warna akan saya jelaskan nanti , yang penting anda 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 menggabungkannya karena id unik di setiap js. Dan sebagai contoh saya akan membuat satu saja lazyloadnya, silahkan teman-teman hapus kode script 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 anda bisa simpan atau tempatkan pada bagian bawah halaman, sebelum tag </body> atau boleh juga tempel langsung ke bagian tata letak widget. Nah selanjutnya anda salin kode CSS ini, ke template blog anda. Letak di <b:skin>, tempatin aja di bagian bawahnya sebelum tag </b:skin> atau anda bisa membuat style sendiri langsung dengan menambahkan tag <style> kode css </style> dengan begitu anda bebas mau ditempatkan di template atau di tata letak widget.
.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; }
}
Ok udah kita lanjut ke tahap selanjutnya, anda harus mempunyai ruang buat menempatkan iklan sebelum kita jadikan iklan melayang. Kode ini boleh anda tambahkan ke sidebar baik melalui menu widget atau langsung edit HTML, perhatikan kode yang saya berikan warna kuning adalah kode iklan 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 akan menampilkan iklan dan kapan kita akan menghilangkan iklan. Kodenya sudah saya rangkai seperti yang ada dibawah ini, dan sekali lagi saya ingatkan perhatikan kode yang saya beri warna. Js dibawah ini boleh anda tempatkan dimana saja, tapi lebih baik letakan pada widget footer atau pasang html template tepatnya sebelum kode </body>.



<script type="text/javascript">
function showIt() {
var adsyank = document.getElementById('AdsRyanAH');
adsyank.classList.add("RyanAH"); } function hideIt() {
adsyank.classList.remove("RyanAH");
var adsyank = document.getElementById('AdsRyanAH'); }
setTimeout("showIt()", 6000); // setelah 6 detik
setTimeout("hideIt()", 15000); // setelah 10 detik
</script>

penjelasan kode diatas :

Semua waktuu berjalan dari nol ya teman-teman, diatas kita menggunakan timer dengan fungsi set TimeOut(). Fungsi ini menggunakan waktu satuan mil detik, jadi anda 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 halaman dimuat. Kemudian saya akan menghilangkan iklannya setelah 15.000 ribu mili detik atau setara dengan 15 detik. Karena waktunya sama -sama dihitung dari nol artinya iklan diatas hanya tampil selama 9000 miki detik atau 9 detik sebelum akhirnya kembali pada tempatnya (menghilang dari layangan).

Cara kerja kode di atas adalah dengan menambahkan kelas css baru dalam sebuah div selama beberapa saat dan kemudian menghapus kelasnya. Kita menggunakan time set-TimeOut yang sama-sama hitunganya dimulai saat halaman sudah dimuat.

Saya rasa kode tersebut tidak melanggar kebijakan mgid hanya saja jika kita menampilkannya terlalu cepat akan mengganggu pengunjung dan membuatnya tidak nyaman. Maka saya sarankan agar anda memberi waktu muncul iklan selama 25 detik (25000 milidetik) dan kemudian menghilangkannya setelah lewat dari 35 detik (35000). Ya memang cukup lama, ini hanya akan muncul jika pengunjung bertahan selama 30 detik di situs anda, dan itu tidak akan mengganggu pengunjung karena rata-rata biasanya visitor itu hanya memakan waktu kurang dari 10 detik di situs kita, biasanya.
Sumber : https://ryanjhr350.blogspot.com/2020/03/cara-membuat-iklan-melayang-mgid.html?m=1
masandri.org
masandri.org Blog Personal Mengulas seputar dunia blogger, AdSense, Game, Islami dan Jasa pembuatan website SEO Responsive

Posting Komentar untuk "Cara Membuat Iklan mgid hamparan layar Untuk meningkatkan pendapatan (iklan overlay)"