Skip to content Skip to sidebar Skip to footer

Tutorial Cara Membuat Iklan Pop Up Berbentuk Banner Di Blog

Iklan Popup Banner


Memasang iklan pop up berbentuk banner biasanya digunakan untuk memberikan pesan selamat datang bagi pengunjung blog yang sedang berkunjung ke halaman sebuah blog. Namun juga ada yang memasangnya karena ingin mengiklankan sesuatu produk agar banner yang muncul tersebut dapat menarik perhatian pengunjung dan mendapatkan penjualan dari iklan tersebut. 

Di beberapa blog penyedia layanan domain dan hosting yang pernah saya kunjungi kemunculan iklan pop up banner memang sudah biasa, terlebih dengan menyediakan slot iklan popup ini juga dapat membantu untuk menambah penghasilan kita.

Maka dari itu di waktu senggang saya yang baik hati ini saya ingin berbagi ilmu tentang bagaimana Cara Membuat Pop Up Banner Untuk Iklan di Blog. 

Kalian bisa cek iklan banner pop up yang ada di blog penyedia layaan domain dan hosting,sangat rapi bukan ? Karena iklan pop up yang ada di pasang muncul beberapa detik setelah pengunjung membuka halaman blog ini, jadi kemunculan iklan pop up ini tidak akan mengganggu si pengunjung blog dan juga potensi untuk di klik lebih besar karena iklan ini akan muncul melayang pas di tengah - tengah halaman website/blog.

Oh iya sekedar informasi, jangan sekali - kali kamu memasang atau menaruh kode iklan adsense kamu di script iklan yang akan saya share ini karena sangat berbahaya dan tidak di anjurkan dan dapat membahayakan akun Google Adsense kamu karena aturan tentang google adsense tidak boleh klik iklan yang menjebak pengunjung. 

Berikut adalah Tutorial cara membuat pop up banner untuk iklan di blog :

Langkah pertama silahkan masuk ke halaman dashboard blog kamu
Pilih menu Tema  lalu >> Edit HTML 
Cari kode </body> Atau kamu bisa menggunakan command : Ctrl + F untuk memunculkan kolom pencarian Letakkan kode script di bawah ini tepat berada diatas </body>

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:600px;height:400px;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(&quot;popbox&quot;).style.display=&quot;none&quot;;removeClassonBody();' role='button' tabindex='0'/>
<div class='pop-content'>
<a href='URL TUJUAN' rel='noopener noreferrer' target='_blank' title='box'>
<div class='popcontent'>
<img alt='banner' height='450' src='URL BANNER ' width='850'/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById(&quot;popbox&quot;).style.display=&quot;none&quot;;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>

Catatan penggunaan :
  • Kode ( width:600px;height:400px ) adalah untuk mengatur ukuran banner kalian, silahkan di sesuaikan agar rapi dan sesuai kemauan kamu
  • Untuk kode URL TUJUAN Bisa kamu isi dengan link tujuan kamu ketika pengunjung mengklik banner iklan yang dipasang
  • Untuk kode URL BANNER  Silahkan kamu isi dengan URL Banner yang akan kamu pasang
  • Terakhir adalah angka 5000 , angka tersebut adalah untuk mengatur waktu kemunculan iklan pop up setelah pengunjung membuka halaman seb/blog kamu.
Nah, itulah cara membuat pop up banner untuk iklan di blog cukup mudah bukan ? silahkan kamu praktekkan sendiri di blog kalian apabila terdapat keluhan atau pertanyaan silahkan tinggalkan di kolom komentar ya.. Terima kasih telah mengunjungi intechasia.com

Post a Comment for "Tutorial Cara Membuat Iklan Pop Up Berbentuk Banner Di Blog"