Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)

Labels:
Beberapa email dari pembaca setia masuk ke Inbox Blogger Tune-Up menanyakan tentang cara membuat wadah iklan terapung, atau ada juga yang menyebut wadah iklan yang muncul tiba-tiba (ads popup). Sebelum menjawabnya, mari kita mengenali lebih dahulu apa itu Ads Popup. Ads Popup adalah iklan yang muncul tiba-tiba ketika pengunjung sedang membuka halaman blog kita, hal ini bertujuan untuk mencuri perhatian pengunjung yang sedang asik membaca artikel di blog kita. Tetapi hati-hati buat para pemilik blog, justru banyak diantara pengunjung blog yang merasa kesal dengan hal tersebut, jika ternyata iklan tersebut muncul berulang-ulang setiap sebuah halaman terbuka. Pada tips-n-trik blogger hack kali ini kita akan membuat ads popup yang bisa kita atur untuk muncul berulang-ulang atau hanya sekali saat pengunjung pertama kali membuka/mengunjungi blog kita. Untuk demo-nya silahkan lihat disini.
Ads Popup for Blogger

Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Klik "Tambah Gadget Baru" dengan tipe "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):
Kode CSS (cascading style sheet)
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}
</style>
Kode JavaScript
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
Kode HTML
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->
<br/><font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://modification-blog.blogspot.com/2010/01/membuat-wadah-iklan-tiba-tiba-muncul.html" target="_blank">Widget by Blogger Tune-Up</a>
</div>
Langkah 5
Klik tombol "Simpan"

Keseluruhan kode Ads Popup Container
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->
<br/><font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://modification-blog.blogspot.com/2010/01/membuat-wadah-iklan-tiba-tiba-muncul.html" target="_blank">Widget by Blogger Tune-Up</a>
</div>
Perhatikan kode CSS (Langkah 4 baris 1 sampai dengan baris 18)!
  • Ubah nilai 350 (langkah 4 baris 4) untuk mengatur lebar wadah;
  • ubah nilai FFFFFF (langkah 4 baris 7) untuk mengubah warna latar dari wadah ads popup;
  • ubah nilai 1px solid #333333 (langkah 4 baris 8) untuk mengatur garis pinggir, jika tidak tidak memerlukan garis pinggir ubah 1px menjadi 0px atau ubah "solid" menjadi "none" (tanpa tanda petik);
  • Untuk mengetahui kode-kode warna HTML silahkan klik disini.
Perhatikan kode JavaScript (Langkah 4 baris 19 sampai dengan baris 25)!
  • var persistclose=0, nilai 0 berarti ads popup akan selalu muncul walau diklik tombol "Tutup" pada saat pengunjung membuka halaman lain, nilai 1 berarti ads popup hanya akan muncul satu kali sampai pengunjung meng-klik tombol "Tutup" dan ads popup tidak akan muncul lagi walaupun pengunjung membuka halaman lain sampai browser ditutup;
  • var startX = 20 dan var startY = 20, nilai 20 adalah jarak x dan y antara ads popup dengan sisi browser dengan satuan pixel, ubahlah nilai 20 untuk mengatur jaraknya;
  • var verticalpos="fromtop" untuk mengatur dari mana ads popup muncul, jika "fromtop" berarti ads popup akan muncul dari atas dan selalu diposisi atas browser, jika di set "frombottom" berarti ads popup akan muncul dari bawah dan akan selalu diposisi bawah browser.
  • Gantilah kode <!-- Kode Iklan --> (Langkah 4 baris 28) dengan kode iklan milik anda.
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Update!

Agar background menjadi transparan silahkan tambahkan kode CSS dibawah ini:
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
Sehingga secara keseluruhan kode menjadi seperti dibawah ini:
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->
<br/><font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://modification-blog.blogspot.com/2010/01/membuat-wadah-iklan-tiba-tiba-muncul.html" target="_blank">Widget by Blogger Tune-Up</a>
</div>

Untuk versi terbaru silahkan di baca disini