Skip to content Skip to sidebar Skip to footer

Cara Membuat Popup Banner Di Blogger Terbaru

Bahastutorial.com -  Kita akan membahas tutorial bagaimana cara membuat banner atau iklan popup di blogger. Dengan Perpaduan css dan javascript terciptanya popup banner untuk pengguna blogger. Popup banner ini juga bisa dibuat untuk Iklan,Ucapan Acara, Atau Undangan.

Langsung saja ke tutorial
  1. Masuk Ke Blogger
  2. Pilih Template/Tema 
  3. Masuk Ke Edit Html

<style type='text/css'>
/* PopUp Box CSS Bahastutorial.com */
@media (max-width:800px){#bahastutorialbanner{display:none}}
#bahastutorialbanner{position:fixed!important;position:absolute;top:-700px;left:39%;margin:0 0 0 -182px;font:normal Dosis,Georgia,Serif;color:#333;-webkit-box-shadow:0 0 10px #333;-moz-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333;background:#fff;z-index:99999;}
#bahastutorialbanner a.close-popup{position:absolute;top:-25px;right:0;font:25px Arial,Sans-Serif;text-decoration:none;text-align:center;color:#f2f2f2;cursor:pointer}
#bahastutorialbanner a.close-popup:hover{color:#fff}
#bahastutorialbanner a.close-popup:active{opacity:0}
#bahastutorialbanner div.black-bg{background:#000;position:fixed;top:0;left:0;width:100%;height:100%;opacity:.6;z-index:-500}
#bahastutorialbanner div.gambar-space{border:5px solid #fff;position:relative;background:#fff;border-bottom:0}
#bahastutorialbanner div.gambar-space img{width:600px;height:400px}
</style>

<!-- jQuery Popup Banner Bahastutorial.com -->
<div id='bahastutorialbanner'>
<a class='close-popup' href='#'>&#215;</a>
<div class='black-bg kaluar'/>
<div class='gambar-space'>
<a href='link banner'><img alt='Judul' src='gambar banner'/></a>
</div>
</div>
<script type='text/javascript'>
// JavaScript Popup Banner Box
$(window).bind(&quot;load&quot;, function() {
$(&#39;#bahastutorialbanner&#39;).animate({top:&quot;100px&quot;}, 2000);
$(&#39;a.close-popup, .kaluar&#39;).click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>
<!-- jQuery Popup Banner Bahastutorial.com [ End ] -->


Cari Dan Simpan Kode Di CSS Tepat Di Atas Kode </head>
Kemudian cari kode dan simpan kode Javascipt ini tepat di atas kode

Yang Harus Di Edit Yaitu
1. gambar banner = Masukan Dengan Link Gambar Banned Kalian Ukuran 600x400
2. link banner = Di Isi Dengan Link Banner Kalian
3. Judul = Di Isi Dengan Judul Dari Banner Iklan Kalian

Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..

kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..

Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com
BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

5 comments for "Cara Membuat Popup Banner Di Blogger Terbaru"

  1. Bermanfaat gan tpi bingung dengan gambar banner nya

    ReplyDelete
  2. halo gan mau tanya ini pop up sudah responsive kah mobile friendly?

    ReplyDelete
  3. cara agar sekali muncul di homepage aja gimana ya

    ReplyDelete