Cara Membuat Iklan Pop Up Melayang di Tengah dengan Waktu 5 Detik

 

    Hiirotaku - Pada artikel kali ini mimin bakal bagiin cara membuat kotak iklan popup melayang di tengah, eitss tapi kotak iklan ini di beri fitur timer 5 detik dan kalau kalian cari tutorialnya pasti yang kalian temukan adalah tutorial iklan popup yang akan membuka dalam waktu 5 detik namun untuk menutup kotak iklannya pasti manual, nah di tutorial kali ini mimin bakal bagiin script membuat iklan popup melayang dengan timer waktu menutup 5 detik, jadi popup akan tertutup otomatis.

Disini script yang saya dapatkan dari website anime streaming yaitu otakudesu, pasti jika kalian suka menonton anime pernah melihat iklan popup di tengah blog dengan timer 5 detik dan tombol close di bawah iklan tersebut.

Langkah - Langkah Memasang Iklan Popup Timer 5 Detik

Cara Pertama :

1. Buka Blogger

2. Ke menu Tema > Edit HTML

3. Copy Pastekan kode CSS dibawah ini tepat di atas kode </b:skin>

 /* css popup ads timer https://www.hiirotaku.my.id/ */
.box_item_ads_popup{position:fixed;z-index:999;left:0;top:14%;margin:0 auto;text-align:center;right:0;width:500px;height:340px}.box_item_ads_popup img{max-width:450px;max-height:300px}.box_item_ads_popup .close-button{width:70%;margin:auto;padding:6px 10px;background:red;font-size:14px;color:#fff;border:3px solid red;background:linear-gradient(#159fff,#1a6bb3)}@media only screen and (max-width:980px){.box_item_ads_popup img{max-width:480px;max-height:280px}.box_item_ads_popup{top:11%;width:450px;height:280px}}.box_item_ads .ads-460{width:calc(50% - 0px)}.box_item_ads .ads-460 img,.box_item_ads .ads-720 img{height:70px}.box_item_ads,.box_item_ads .ads-460,.box_item_ads .ads-720{margin-bottom:0;margin-top:0}.box_item_ads .ads-720{display:block}.box_item_ads{margin-bottom:5px;display:block}.box_item_ads.box_item_ads_popup img{max-width:460px;max-height:280px}.box_item_ads_popup{top:11%;width:460px;height:280px}}@media only screen and (max-width:480px){.box_item_ads_popup img{max-width:450px;max-height:200px}.box_item_ads_popup{top:11%;width:335px;height:234px}}@media only screen and (max-width:425px){.box_item_ads_popup img{max-width:400px;max-height:180px}.box_item_ads_popup{top:11%;width:335px;height:234px}}@media only screen and (max-width:320px){.box_item_ads_popup img{max-width:350px;max-height:140px}.box_item_ads_popup{top:11%;width:335px;height:234px}} 

4. Jika sudah kalian Copy dan Pastekan juga kode Javascript ini tepat di atas </body>

 <!-- popup ads timer https://www.hiirotaku.my.id/ -->
<script>$.fn.extend({replaceTag: function (newTagObj, keepProps){// "return" suggested by ColeLawrence
return this.each(function(){jQuery.replaceTag(this, newTagObj, keepProps);});}});$(document).ready(function(){$('iframe').on('contextmenu', function(e){e.preventDefault();});if($(window).width() > 980){$('marquee').replaceTag('<div>', true);}$('.box_item_ads_popup div.close-button').on('click', function(e){$(this).parent().remove();return false;});setTimeout(function(){$('.box_item_ads_popup div.close-button').click();clearInterval(auto_close_tampilan);}, 6000);var counter=5;var auto_close_tampilan=setInterval(function (){$('#counter_tampilan_tambahan').html(counter);--counter;}, 1000);});</script><div class="box_item_ads_popup"><div><a href="https://www.hiirotaku.my.id/" target="_blank" rel="nofollow external noopener noreferrer" data-wpel-link="external"> <img src="https://1.bp.blogspot.com/-dlqAByBKybc/YMGBxLULsFI/AAAAAAAAACM/cefFjhi5FTQh6LfzOhJNM8Kc1Lr81Fd0gCLcBGAsYHQ/s500/Anime%2BSub%2BIndo.gif" rel="nofollow" alt="Anime Sub Indo"> </a></div><div class="close-button">Tutup Iklan (otomatis tutup dalam <span id="counter_tampilan_tambahan">5</span> detik)</div></div> 

5. Simpan

Cara Kedua :

1. Buka Blogger

2. Ke menu Tata Letak

3. Add widget > Pilih Javascript

4. Copy pastekan kode dibawah ini di widget yang kalian buat tadi

 <style>
  
/* css popup ads timer https://www.hiirotaku.my.id/ */
.box_item_ads_popup{position:fixed;z-index:999;left:0;top:14%;margin:0 auto;text-align:center;right:0;width:500px;height:340px}.box_item_ads_popup img{max-width:450px;max-height:300px}.box_item_ads_popup .close-button{width:70%;margin:auto;padding:6px 10px;background:red;font-size:14px;color:#fff;border:3px solid red;background:linear-gradient(#159fff,#1a6bb3)}@media only screen and (max-width:980px){.box_item_ads_popup img{max-width:480px;max-height:280px}.box_item_ads_popup{top:11%;width:450px;height:280px}}.box_item_ads .ads-460{width:calc(50% - 0px)}.box_item_ads .ads-460 img,.box_item_ads .ads-720 img{height:70px}.box_item_ads,.box_item_ads .ads-460,.box_item_ads .ads-720{margin-bottom:0;margin-top:0}.box_item_ads .ads-720{display:block}.box_item_ads{margin-bottom:5px;display:block}.box_item_ads.box_item_ads_popup img{max-width:460px;max-height:280px}.box_item_ads_popup{top:11%;width:460px;height:280px}}@media only screen and (max-width:480px){.box_item_ads_popup img{max-width:450px;max-height:200px}.box_item_ads_popup{top:11%;width:335px;height:234px}}@media only screen and (max-width:425px){.box_item_ads_popup img{max-width:400px;max-height:180px}.box_item_ads_popup{top:11%;width:335px;height:234px}}@media only screen and (max-width:320px){.box_item_ads_popup img{max-width:350px;max-height:140px}.box_item_ads_popup{top:11%;width:335px;height:234px}}</style>

<!-- popup ads timer https://www.hiirotaku.my.id/ -->
<script>$.fn.extend({replaceTag: function (newTagObj, keepProps){// "return" suggested by ColeLawrence
return this.each(function(){jQuery.replaceTag(this, newTagObj, keepProps);});}});$(document).ready(function(){$('iframe').on('contextmenu', function(e){e.preventDefault();});if($(window).width() > 980){$('marquee').replaceTag('<div>', true);}$('.box_item_ads_popup div.close-button').on('click', function(e){$(this).parent().remove();return false;});setTimeout(function(){$('.box_item_ads_popup div.close-button').click();clearInterval(auto_close_tampilan);}, 6000);var counter=5;var auto_close_tampilan=setInterval(function (){$('#counter_tampilan_tambahan').html(counter);--counter;}, 1000);});</script><div class="box_item_ads_popup"><div><a href="https://www.hiirotaku.my.id/" target="_blank" rel="nofollow external noopener noreferrer" data-wpel-link="external"> <img src="https://1.bp.blogspot.com/-dlqAByBKybc/YMGBxLULsFI/AAAAAAAAACM/cefFjhi5FTQh6LfzOhJNM8Kc1Lr81Fd0gCLcBGAsYHQ/s500/Anime%2BSub%2BIndo.gif" rel="nofollow" alt="Anime Sub Indo"> </a></div><div class="close-button">Tutup Iklan (otomatis tutup dalam <span id="counter_tampilan_tambahan">5</span> detik)</div></div> 

5. Lalu Simpan

DEMO

Catatan : teks yang saya tandai pada javascriptnya bisa kalian atur seperti berapa lama waktu popup akan tertutup, mengganti banner dan url banner jika diklik dan juga mengganti tulisan tutup/close popup

Semoga tutorial berikut bermanfa'at dan selamat mencoba.

Untuk kalian yang bertanya untuk adsense bisa meningkatkan earning apa tidak? aman gak buat adsense? yap jawabnya saya tidak tau karena belum pernah mencoba, jika kalian ingin mencoba slot iklan seperti ini gunakan advertising network lain selain adsense, atau menggunakan iklan jenis affiliate.

sc : otakudesu