Cara Membuat Popup Banner di Blogger Untuk Iklan

slot iklan popup banner

Memasang popup banner di blog - Sudah jarang sekali saya membahas tutorial blogger setelah sebelumnya menjelaskan cara membuat halaman blog jadi fullscreen, nah pada kesempatan kali ini saya akan mncoba berbagi tutorial lagi cara membuat popup banner melayang di tengah halaman blog teman-teman.

Popup banner ini biasanya dibuat untuk ucapan selamat pada hari peringatan tertentu, misalnya saja membuat popup banner untuk ucapan selamat hari raya ramadhan. Popup banner ini bisa juga dimanfaatkan untuk slot iklan popup banner jika ada advertiser yang ingin bekerja sama dngan blog teman-teman.

Tentu saja, dengan menyediakan slot iklan popup banner akan menambah penghasilan kamu, namun slot banner ini tidak dianjurkan untuk dipasang kode iklan google adsense karena bisa membahayakan akun adsense kamu, berikut cara membuat popup banner dihalaman blog..

Cara memasang popup banner di blog/website


Popup banner yang akan saya buat ini sama seperti pada blog kompiajaib dan popup banner ini akan muncul beberapa detik setelah pengunjung membuka halaman blog kamu, jadi kemunculan slot iklan popup banner ini tidak begitu mengagetkan pengunjung.

Langkah membuat popup banner dihalaman blog sangatlah mudah teman-teman copy saja kode dibawah ini dan pastekan di atas kode </body>.

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:850px;height:450px;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("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>
<div class="pop-content">
<a href="#" target="_blank" rel="noopener noreferrer" title="box">
<div class="popcontent">
<img src="Masukan link gambar disini" alt="banner" width="850" height="450"/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";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>


Perhatikan pada kode yang saya warnai diatas, silahkan simak penjelasannya dibawah ini agar tampilan popup banner sesuai dengan halaman teman-teman.

1. Kode 850px dan 450px silahkan kamu rubah ukurannya sesuai dengan lebar dan tinggi banner yang kamu buat.

2. Kode -225px dan -425px kamu rubah juga dengan menyesuaikan ukuran banner pada tahap nomor 1, caranya dengan menyesuaikan nilai negative dari tinggi dan lebar banner dibagi menjadi 2.

3. Perhatikan juga pada kode <a href="#" target="_blank" rel="noopener noreferrer" title="box">, kode tersebut adalah untuk menyimpan link didalam slot iklan popup banner yang kamu buat. Jika tidak menggunakan link hapus saja kode tersebut dan juga kode ini </a>.

4. Silahkan masukan link banner yang sudah kamu upload di kode yang saya tandai diatas.

5. Terakhir, lihat angka 5000 yang saya tandai. Angka tersebut adalah untuk mengatur waktu kemunculan popup banner setelah pengunjung membuka halaman blog kamu.

Nah mudah bukan cara membuat iklan popup banner melayang di blogger. Silahkan kamu manfaatkan banner tersebut untuk sebuah ucapan selamat bergambar atau untuk iklan advertiser yang ingin mempromosikan produk mereka melalui blog teman-teman.

Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel