Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian - Kali ini rekblogging akan membagikan tutorial mengenai cara menciptakan pop up banner di blog yang tentunya menarik perhatian pengujung blog dengan memakai CSS dan Javascript. Pop up banner ini sanggup berfungsi sebagai banner iklan di blog kalau ada pengiklan yang ingin mempromosikan jasa atau produknya di blog Kamu. Bisa juga diisi dengan banner yang lainnya menyerupai ucapan selamat tiba atau perayaan hari raya menyerupai pop up ucapan menunaikan puasa atau lebaran idul fitri.
Tutorial Iklan Melayang atau Pop Up Banner di Blog
Tutorial kali ini terinspirasi oleh kompi asing 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 sehabis 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 dipakai untuk slot iklan, tetapi tidak dianjurkan untuk memasang iklan google adsense di sini alasannya yaitu sanggup saja terkena banned karena menyalahi ketentuan google yaitu menutupi konten website.
Baca juga: Cara Membuat Kotak Iklan 125x125 di Blog
Dengan adanya tutorial ini diperlukan sanggup 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" lalu klik "Edit HTML
#3 Copy dan paste instruksi 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="√ Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian"> <div class="popcontent"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmiX7EBKnwEinchFTZny9Ay5LbRh6u_ia7dBuaJSTNcs8Nii53Ce97wccyn3a8I2gYo0SV9YBPpflRPkUEVgqg6PteIHjRZcx2WIZ05GNOrBEfzIkCJQvpFl6qNrJe7kJkga4zy3ZvL9w/s850/ramadan.jpg" alt="Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian √ Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian" width="850" height="450"/> </div> </a> <button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>×</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: instruksi dengan warna kuning sanggup disesuaikan.
- Kode width:800px;height:400px; menyesuaikan dengan ukuran banner yang akan dipasang, sedang kan untuk instruksi margin:-200px 0 0 -400px; diadaptasi dengan tinggi dan lebar banner dibagi dua.
- Kode <a href="#" target="_blank" rel="noopener noreferrer" title="√ Membuat Pop Up Banner Iklan di Blog yang Menarik Perhatian"> dan <a sanggup dihilangkan kalau Kamu memasang banner tanpa mengarahkan ke link tujuan. Kode box sanggup Kamu ganti dengan teks sesuai keinginanmu. Kode # ganti dengan url yang ingin dituju.
- Kode amp;times; ubah menjadi &times; kalau Kamu memasangnya di blogger.
- 5000 merupakan waktu jeda munculnya banner di blog. Tambah atau kurangi untuk mengganti waktu jeda.
Demikian tutorial mengenai cara menciptakan pop up banner iklan di web. Atau kalau Kamu mencari cara menciptakan iklan melayang di blog, sanggup juga memakai cara ini. Untuk demo sanggup Kamu lihat di rekblogging ini, alasannya yaitu sudah terpasang.
Sumber http://www.rekblogging.com/
