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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfd-aBJasROMq1Wy_sGQcSr7uCLLQVJULOALRhWC1U0refvM71f2cClxcDKVJfL6OVXUhKqPQu4xKxgIHoCMj36GokxSN7-N4V3pI9bTb9lNiZ4PkWE9RpDDWqH65QU0HlQlvsxECqzSs/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.

31 comments

8-) Qren Min...
Auto praktekin cara membuat pop up banner iklan di web/blog nihh...

Bookmark dlu Mimin...

mntap, akhirnya update lagi. kapan2 tak coba buat dipasang di blogger. semoga aja tidak mengganggu pembaca, thankis mimin

Keren mas mau saya aplikasikan juga ke blog saya ... Tapi nanti jadi berat ga ya ya page speed nya ..

Tapi saya sewaktu berselancar di dunia blog, ada beberapa blog yang memasang iklan popup berupa iklan adsense di blog mereka. Kok mereka masih aman ya? Atau beluk keciduk kali ya, hihihi :D

wah bagus nih bang kalau coba diterapin di blog biar nambah segi ketertarikan pengunjung.. salam hidup sehat solusisederhana..

Boleh dicoba nih caranya, tapi apakah aman adsensenya om kagak ke ban ?

caranya biar popup hanya muncul sekali aja , gimana ya?

caranya biar popup hanya muncul sekali di homepage aja , gimana ya?

kenapa waktu di terapkan di blog saya dia setelah di hilangkan pop upnya
blog saya tidak bisa di scroll ya bro?

ketika saya copy paste kode diatas lalu saya simpan. ada notifikasi update gagal. dan saya juga kurang paham di & times; .
mohon penerahannya?

mas kenapa web saya ketika muncul pop up tidak bisa di scrol ke bawah ya

Kenapa saat pop up muncul maupun setelah sudah hilang blog nya jadi tidak bisa di-scroll ya?

kode iklannya ditaruh mana ya min?

thanks mas, tutorialnya bermanfaat banget, muter" nyari baru ketemu disini hehehe

abis diclose pop upnya langsung ga bisa discroll,.. di HP ama PC sama aja

terima kasih
izin pakai script

mas, kalo biar tampilan popupnya muncul sekali aja pas buka website pertama, ketika masuk halaman lain biar gak muncul popupnya lagi, giman dong?

mas kalo pop up yang mau di munculin iklan dari adsens bisa ga? cara nya gmana yaa thanks

setelah iklan muncul. diklik close kok jadi gak bisa discroll blog/postingannya

Terimakasih, artikel sgt membantu saya

banner ini bisa untuk ads ga min?

kenapa waktu di terapkan di blog saya dia setelah di hilangkan pop upnya
blog saya tidak bisa di scroll ya bro?

https://www.majalahwakanda.com


EmoticonEmoticon