Sunday, May 19, 2019

Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian

Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian - Kali ini rekblogging akan membagikan tutorial mengenai cara membuat pop up banner di blog yang tentunya menarik perhatian pengujung blog dengan menggunakan CSS dan Javascript. Pop up banner ini bisa berfungsi sebagai banner iklan di blog jika ada pengiklan yang ingin mempromosikan jasa atau produknya di blog Kamu. Bisa juga diisi dengan banner yang lainnya seperti ucapan selamat datang atau perayaan hari raya seperti pop up ucapan menunaikan puasa atau lebaran idul fitri.

cara membuat banner iklan melayang di blog


Tutorial Iklan Melayang atau Pop Up Banner di Blog


Tutorial kali ini terinspirasi oleh kompi ajaib yang juga memasang pop up banner di blognya. Tutorial ini juga sudah tayang di blog kompiajaib sebelum artikel ini publish. Pop up banner iklan ini disertai dengan tombol close di pojok kanan atas luar banner dan akan muncul beberapa detik setelah pengunjung membuka halaman blog. Sebagai catatan pop up banner ini akan muncul di setiap Kamu membuka halaman baru, tidak hanya di homepage saja.

Meskipun pop up banner ini digunakan untuk slot iklan, tetapi tidak dianjurkan untuk memasang iklan google adsense di sini karena bisa saja terkena banned karena menyalahi ketentuan google yaitu menutupi konten website.

Baca juga: Cara Membuat Kotak Iklan 125x125 di Blog

Dengan adanya tutorial ini diharapkan dapat dimanfaatkan bagi Kamu yang ingin menambah penghasilan dengan cara membuka pemasangan iklan di blog Kamu.


Cara Membuat Pop Up Banner Iklan di Website


#1 Buka dasbor blogger

#2 Pilih "Tema" kemudian klik "Edit HTML

#3 Copy dan paste kode di bawah ini 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:800px;height:400px;display:block;position:absolute;top:50%;left:50%;margin:-200px 0 0 -400px;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:20px;height:20px;line-height:20px;text-align:center;top:-10px;right:-10px;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="https://2.bp.blogspot.com/-d6sRdYCCXIM/XM5PXEp9m-I/AAAAAAABKUM/q0BOQ0RUVeEmmDfO9SD6FqxXuMb-GTQ9QCLcBGAs/s850/ramadan.jpg" alt="banner" width="850" height="450"/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&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(/bflowboxb/g,"")}
//]]>
 </script>


Baca juga: Cara Membuat Pop Up Fanspage Facebook di Blog

CATATAN: kode dengan warna kuning bisa disesuaikan.
  • Kode width:800px;height:400px; menyesuaikan dengan ukuran banner yang akan dipasang, sedang kan untuk kode margin:-200px 0 0 -400px; disesuaikan dengan tinggi dan lebar banner dibagi dua.
  • Kode <a href="#" target="_blank" rel="noopener noreferrer" title="box"> dan <a dapat dihilangkan jika Kamu memasang banner tanpa mengarahkan ke link tujuan. Kode box dapat Kamu ganti dengan teks sesuai keinginanmu. Kode # ganti dengan url yang ingin dituju.
  • Kode amp;times; ubah menjadi &amp;times; jika Kamu memasangnya di blogger.
  • 5000 merupakan waktu jeda munculnya banner di blog. Tambah atau kurangi untuk mengganti waktu jeda.

Demikian tutorial mengenai cara membuat pop up banner iklan di web. Atau jika Kamu mencari cara membuat iklan melayang di blog, bisa juga menggunakan cara ini. Untuk demo bisa Kamu lihat di rekblogging ini, karena sudah terpasang.

This Is The Newest Post

1 comments so far


EmoticonEmoticon