Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian - Rek Blogging

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 Berhubungan 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 Berhubungan dengan banner yang lainnya seperti ucapan selamat datang atau perayaan hari raya sepertinya pop up ucapan menunaikan puasa atau SeRisalah idul fitri.

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 telah tayang di blog kompiajaib sebelum artikel ini publish. Pop up banner iklan ini disertai Berhubungan 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 mengurangi hanya di

homepage

saja.

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

Baca juga: Cara Membuat Kotak Iklan 125x125 di Blog

Dengan adanya tutorial ini diharapkan menmemperoleh dimanfaatkan bagi Kamu yang ingin menambah penghasilan Herbi 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 Kolong 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7tzXXFYyfcNBaBMczLQxmrQkwiFXPtR_cRE9cUmp0YPj2XtGStkdmcaBhpmvYsoVon3eD_xWNk9wV8vuSl0sBmsCZevZqXv8EaWSC-jp4IJsEexgK5kLofgl9J6GaG5-FXasc8ZUGOs/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 Herbi warna kuning bisa disesuaikan.

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

Demikian tutorial tentang cara membuat pop up banner iklan di web. Atau jika Kamu mencari cara membuat iklan melayang di blog, bisa juga memakai cara ini. Untuk demo bisa Kamu memperlihatkan di

rekblogging

ini, karena telah terpasang.

Thanks for reading our article Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian - Rek Blogging. Please share it with kind.
Sincery Cara Membuat Blog
SRC: https://www.rekblogging.com/2019/05/membuat-pop-up-banner-di-blog.html
Satu Artikel, di tulis ulang berkali-kali by cara sukses bisnis di rumah