✔ Cara Menciptakan Popup Banner Di Blogger Untuk Iklan

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

Popup banner ini biasanya dibentuk untuk ucapan selamat pada hari peringatan tertentu, contohnya saja menciptakan popup banner untuk ucapan selamat hari raya ramadhan. Popup banner ini dapat juga dimanfaatkan untuk slot iklan popup banner jikalau 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 isyarat iklan google adsense alasannya ialah dapat membahayakan akun adsense kamu, berikut cara menciptakan popup banner dihalaman blog..

Cara memasang popup banner di blog/website

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

Langkah menciptakan popup banner dihalaman blog sangatlah gampang teman-teman copy saja isyarat dibawah ini dan pastekan di atas isyarat </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="✔ Cara Membuat Popup Banner di Blogger Untuk Iklan">
 <div class="popcontent">
 <img src="Masukan link gambar disini" alt=" Sudah jarang sekali saya membahas tutorial blogger sehabis sebelumnya menjelaskan  ✔ Cara Membuat Popup Banner di Blogger Untuk Iklan" 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 isyarat yang saya warnai diatas, silahkan simak penjelasannya dibawah ini semoga tampilan popup banner sesuai dengan halaman teman-teman.

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

2. Kode -225px dan -425px kau 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 isyarat <a href="#" target="_blank" rel="noopener noreferrer" title="✔ Cara Membuat Popup Banner di Blogger Untuk Iklan">, isyarat tersebut ialah untuk menyimpan link didalam slot iklan popup banner yang kau buat. Jika tidak memakai link hapus saja isyarat tersebut dan juga isyarat ini </a>.

4. Silahkan masukan link banner yang sudah kau upload di isyarat yang saya tandai diatas.

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

Nah gampang bukan cara menciptakan iklan popup banner melayang di blogger. Silahkan kau manfaatkan banner tersebut untuk sebuah ucapan selamat bergambar atau untuk iklan advertiser yang ingin mempromosikan produk mereka melalui blog teman-teman.
Sumber http://www.masigun.com

Share this post

Berlangganan update artikel terbaru via email: