Cara Membuat Pop Up Banner Untuk Iklan di Blog

Cara Membuat Pop Up Banner Untuk Iklan di Blog

Memasang iklan pop up berupa banner biasanya digunakan untuk memberikan ucapan selamat datang bagi pengunjung yang sedang mengunjungi ke halaman sebuah website/blog. Namun terkadang ada juga yang memasangnya karena ingin mengiklankan sesuatu agar banner yang muncul tersebut dapat menarik perhatian pengunjung. 

Dibeberapa website yang pernah saya kunjungi kemunculan iklan pop up memang sudah biasa, terlebih dengan menyediakan slot iklan popup ini juga dapat membantu untuk menambah penghasilan kita. Maka dari itu di kesempatan yang baik ini saya ingin berbagi tentang bagaimana Cara Membuat Pop Up Banner Untuk Iklan di Blog. 

Kalian bisa cek iklan banner pop up yang sudah saya pasang di blog ini, sangat rapi bukan ? Karena iklan pop up yang saya pasang muncul beberapa detik setelah pengunjung membuka halaman blog ini, jadi kemunculan iklan pop up ini tidak akan mengganggu si pengunjung dan juga target untuk di klik lebih besar karena iklan ini akan muncul melayang pas di tengah - tengah halaman website/blog.

Oh iya sekedar informasi, jangan sekali - kali kamu memasang atau menaruh kode iklan adsense kamu di script iklan yang akan saya share ini karena sangat tidak di anjurkan dan dapat membahayakan akun Google Adsense kamu. 

Berikut adalah cara membuat pop up banner untuk iklan di blog :

  • Langkah pertama silahkan masuk ke halaman dashboard blog kamu
  • Pilih menu Tema => Edit HTML 
  • Cari kode </body> Atau kamu bisa menggunakan Ctrl + F untuk memunculkan kolom pencarian
  • Letakkan kode script di bawah ini tepat berada diatas </body>

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:600px;height:400px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
</style>
<div class='popbox hide' id='popbox'>
<div aria-label='Close' class='pop-overlay' onclick='document.getElementById(&quot;popbox&quot;).style.display=&quot;none&quot;;removeClassonBody();' role='button' tabindex='0'/>
<div class='pop-content'>
<a href='URL TUJUAN' rel='noopener noreferrer' target='_blank' title='box'>
<div class='popcontent'>
<img alt='banner' height='450' src='URL BANNER ' width='850'/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById(&quot;popbox&quot;).style.display=&quot;none&quot;;removeClassonBody();'>&amp;times;</button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"
 }, 5000);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/\bflowbox\b/g,"")}
//]]>
 </script> 

  • Kode ( width:600px;height:400px ) adalah untuk mengatur ukuran banner kalian, silahkan di sesuaikan
  • Untuk kode URL TUJUAN Bisa kamu isi dengan link tujuan kamu ketika pengunjung mengklik banner yang dipasang
  • Untuk kode URL BANNER  Silahkan kamu isi dengan URL Banner yang akan kamu pasang
  • Terakhir adalah angka 5000 , angka tersebut adalah untuk mengatur waktu kemunculan iklan pop up setelah pengunjung membuka halaman seb/blog kamu.
Nah, itulah cara membuat pop up banner untuk iklan di blog cukup mudah bukan ? silahkan kamu praktekkan sendiri di blog kalian apabila terdapat keluhan atau pertanyaan silahkan tinggalkan di kolom komentar ya.. Terima kasih telah mengunjungi Mas Subhan Blog........

Berlangganan update artikel terbaru via email:

2 Responses to "Cara Membuat Pop Up Banner Untuk Iklan di Blog"

Berkomentarlah dengan bijak dan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Yuk Donasi ke Blog ini, Bantu berikan donasi jika dirasa blog ini bermanfaat. Donasi akan kita gunakan untuk membiayai seluruh kebutuhan blog ini. Terima kasih telah mempercayakan  Mas Subhan Blog :)
banner