Membuat Pop Up Banner Untuk Iklan

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>

</a>

<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&times;</button>

</div>

//<![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

Sumber

bangudin

Membuat Pop Up Banner Untuk Iklan

Posting Komentar