--> Skip to main content

Cara Memasang Pop-up Banner Iklan di Blogger

Cara Memasang Pop-up Banner Iklan di Blogger - Popup banner iklan biasanya dibuat jika ada advertiser yang ingin bekerja sama dengan blog sobat.

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


Cara Memasang Pop-up Banner Iklan di Blogger - Popup banner iklan biasanya dibuat jika ada advertiser yang ingin bekerja sama dengan blog sobat. Dengan menyediakan slot iklan popup banner akan menambah penghasilan sobat, namun slot banner ini tidak dianjurkan untuk dipasang kode iklan google adsense karena bisa membahayakan akun adsense sobat. berikut cara membuat popup banner dihalaman blog.


Popup banner ini akan muncul beberapa detik setelah pengunjung membuka halaman blog sobat. Langkah membuat popup banner dihalaman blog sangatlah mudah, cukup copy saja kode dibawah ini dan tempelkan di atas kode </body>.


Cara yang kedua adalah dengan membuat widget HTML di halaman tata letak akun blogger Anda. Berikut codenya :


<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>


Keterangan :


  • Code 850px dan 450px silahkan dirubah ukurannya sesuai dengan lebar dan tinggi banner yang akan dibuat.
  • Code -225px dan -425px silahkan diubah juga dengan menyesuaikan ukuran banner pada tahap nomor 1, caranya dengan menyesuaikan nilai negative dari tinggi dan lebar banner dibagi menjadi 2.
  • Code # adalah untuk menyimpan link didalam slot iklan popup banner yang sobat buat. Jika tidak menggunakan link hapus saja kode tersebut dan juga kode ini .
  • Silahkan masukan link banner yang sudah diupload di kode yang ditandai diatas.
  • Angka 5000 yang  ditandai. Angka tersebut adalah untuk mengatur waktu kemunculan popup banner setelah pengunjung membuka halaman blog .