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
LihatTutupKomentar