Saat ini sudah sering kita lihat di sebuah website menampilkan pop up banner yang kemudian dapat disembunyikan dengan cara mengklik tombol tutup (close) atau otomatis tersembunyi dalam hitungan detik.
Pop up banner tersebut umumnya dibuat dengan menggunakan javascript dengan memanfaatkan event onclick atau memberikan durasi aktif sebuah session.
Selengkapnya langsung saja kita mulai cara menampilkannya.
1. Pertama-tama kita harus membuat fungsi javascript untuk menampilkan banner secara otomatis dan menyembunyikannya. Dengan bantuan mesin pencarian seperti google maka kita akan dengan mudah banyak menemukannya.
Sebagai contoh, dapat menggunakan contoh fungsi javascript di bawah ini.
//awal fungsi javascript
var persistclose = 0 //isi dengan angka 0 atau 1. 1 artinya pop up banner tidak akan tampil lagi setelah ditutup selama session browser belum habis.
var startX = 300 // untuk mengatur posisi pop up banner secara horizontal
var startY = 250 //untuk mengatur posisi pop up banner secara vertikal
var verticalpos = “fromtop” //isi dengan “fromtop” atau”frombottom” untuk menentukan posisi secara vertikal diambil dari atas atau bawah.
function iecompattest()
{
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}
function get_cookie(Name)
{
var search = Name + “=”
var returnvalue = “”;
if (document.cookie.length > 0)
{
offset = document.cookie.indexOf(search)
if (offset != -1)
{
offset += search.length
end = document.cookie.indexOf(“;”, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar()
{
if (persistclose)
document.cookie=”remainclosed=1″
document.getElementById(“topbar”).style.visibility=”hidden”
}
function staticbar()
{
barheight=document.getElementById(“topbar”).offsetHeight
var ns = (navigator.appName.indexOf(“Netscape”) != -1) || window.opera;
var d = document;
function ml(id)
{
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie(“remainclosed”)==””)
el.style.visibility=”visible”
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+”px”;this.style.top=y+”px”;};
el.x = startX;
if (verticalpos==”fromtop”)
el.y = startY;
else
{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopCenter=function()
{
if (verticalpos==”fromtop”)
{
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY – ftlObj.y)/8;
}
else
{
var pY = ns ? pageYOffset + innerHeight – barheight: iecompattest().scrollTop + iecompattest().clientHeight – barheight;
ftlObj.y += (pY – startY – ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(“stayTopCenter()”, 10);
}
ftlObj = ml(“topbar”);
stayTopCenter();
}
if (window.addEventListener)
window.addEventListener(“load”, staticbar, false)
else if (window.attachEvent)
window.attachEvent(“onload”, staticbar)
else if (document.getElementById)
window.onload=staticbar
//akhir dari fungsi javascript
2. Panggil fungsi javascript di atas pada template yang digunakan dan setelah itu tambahkan css berikut ini.
#topbar{
position: absolute;
border: 3px #00FF00;
background-color: transparent;
visibility: hidden;
z-index: 100;
}
#topbar merupakan nama div yang digunakan oleh pop up banner
3. Selanjutnya sisipkan tag html berikut ke dalam body yang merupakan isi dari pop up banner.
<div align=”center”>
<div id=”topbar”>
<div align=”right”><a href=”#” onclick=”closebar(); return false”>
<img src=”/images/close.gif” border=”0″ width=”73″ height=”15″ /></a>
</div>
<img src=”/images/popup_banner.jpg” border=”0/>
</div>
</div>
4. Div dengan align right merupakan tempat untuk tombol tutup (close)
Reload dan lihat hasilnya. Mudah bukan?
Klik disini untuk melihat demo.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.