Pop-up reklam bir web siteye girip belirli veya belirsiz yerlere tıkladığınızda, sitede etkileşim gösterdiğinizde karşınıza çıkan değişken boyutları olan reklam çeşididir.
Bu reklamları JavaScript kullanarak yapacağız eğer ilginizi çekiyorsa JS eğitimine buraya tıklayarak ulaşabilirsiniz.
Çok fazla olunca, sürekli çıkınca insanın canını sıkan Pop-Up reklamlarını gerekli JavaScript kodlarını kullanarak belirli bir saatte, sürede gösterebiliriz.
Pop-Up Reklam Nasıl Yapılır?
Pop-Up reklamımızı yapmak için öncelikle HTML, CSS kodları yazarak kullanıcıya bir reklam kutucuğu göstermeye çalışalım.
<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;"><span style="font-size: 12px;"><div id="fadeinbox" style="left: 612px; top: 201px; visibility: hidden;">
<br>
<br><b>
<center>
<br>
Merhaba;
<br>
<br>
Bu bir Pop-Up reklamdır.
<br>
kod10.com
<br>
<br>
*Bu uyarı 24 saatte bir kez olmak üzere 45 sn. süre ile gösterilir.
</center></b>
<br>
<div align="center"> <a href="#" onclick="hidefadebox();return false" class="gensmall"><i class="fas fa-times-circle"></i></a></div>
</div>
</span>Yukarıdaki HTML kodlarımızda bir div oluşturduktan sonra konumlandırmasını ve görünürlüğünü “style” kullanarak ayarladık. Bu div bizim ana Pop-Up reklamımız olacak. Pop-up reklamımızda kullanıcının göreceği metinleri ise “br” etiketlerinde yazdık.
Daha sonra oluşturduğumuz bloğu CSS kodları ile düzenlememiz gerekiyor. Bunun için
<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;"><span style="font-size: 12px;"><link rel="stylesheet" href="style.css"></span>kodu ile aynı dizine eklediğim CSS dosyamı projeme dahil ediyorum.
Dahil ettiğim CSS dosyasının içinde yazan kodlar aşağıdaki gibidir.
<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;"><span style="font-size: 12px;">#fadeinbox {
BORDER-RIGHT:#ff000045 2px solid;
PADDING-RIGHT: 4px;
BORDER-TOP: #ff000045 2px solid;
PADDING-LEFT: 4px;
FONT-SIZE: 11px;
Z-INDEX: 100;
LEFT: 0px;
VISIBILITY: hidden;
PADDING-BOTTOM: 4px;
BORDER-LEFT: #ff000045 2px solid;
WIDTH: 300px;
PADDING-TOP: 4px;
BORDER-BOTTOM: #ff000045 2px solid;
FONT-FAMILY: Tahoma, Verdana, Arial, Helvetica, sans-serif;
POSITION: absolute;
TOP: -400px;
BACKGROUND-COLOR: #f6f6f6;
border-radius: 20px/50px;
}</span>Bu kodlar sayesinde “fadeinbox” id değerini tanımladığımız div bloğunda görsel düzenlemeler yaptık. Eğer isterseniz daha güzel bir şekilde yeniden düzenleyebilirsiniz.
Artık tek yapmamız gereken JavaScript kodları girerek bunu belirli saatte çıkan Pop-Up reklama dönüştürmek. Bunun için öncelikle aynı dizinde oluşturduğumuz JS dosyasını projemize dahil etmek.
<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;"><span style="font-size: 12px;"><script src="script.js" async defer></script></span>Yukarıdaki kodları “body” etiketi bitmeden hemen önceki satıra yazarak bu işlemi gerçekleştirdik.
“Script.js” dosyasının içerisinde yer alan kodlar ise aşağıdaki gibidir.
<pre style="background: rgb(238, 238, 238); border: 1px dashed rgb(153, 153, 153); line-height: 14px; outline: 0px; overflow: auto; padding: 5px; vertical-align: baseline; width: 592.016px;"><code style="background-attachment: initial; background-clip: initial; background-color: #f1f1f1; background-origin: initial; background-position: 0% 0%; background-repeat: no-repeat; background-size: initial; background: url("images/code.gif") left top no-repeat rgb(241, 241, 241); border-color: rgb(221, 221, 221); border-image: initial; border-style: dotted dotted dotted solid; border-width: 1px 1px 1px 10px; display: block; margin: 0px; outline: 0px; padding: 20px; vertical-align: baseline;"><span style="font-size: 12px;">var displaymode="oncepersession"
var enablefade="yes"
var autohidebox=["yes", 45]
var showonscroll="yes"
var IEfadelength=1
var Mozfadedegree=0.05
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
function displayfadeinbox(){
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)
if (enablefade=="yes" && objref.filters){
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity){
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else{
objref.style.MozOpacity=1
controlledhidebox()
}
}
else
controlledhidebox()
}
function mozfadefx(){
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else{
clearInterval(mozfadevar)
controlledhidebox()
}
}
function staticfadebox(){
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}
function hidefadebox(){
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}
function controlledhidebox(){
if (autohidebox[0]=="yes"){
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}
function initfunction(){
setTimeout("displayfadeinbox()", 100)
}
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;
}
if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}</span>
Eğer tüm kodları aynı dizine koyup aynı şekilde yazmanız gerekmektedir. Aynı şekilde yapmanız durumunda günde 1 defa 45 saniye boyunca gösterilecektir. Eğer bu 45 saniyeyi uzatmak veya kısaltmak isterseniz “script.js” dosyasına gidin. Ve üçüncü satırda bulunan “45” değerini saniye cinsinden istediğiniz şekilde yazmanız.
Bu sistemi kullanarak sitelerinize Pop-Up reklamlar ekleyebilirsiniz. Eğer 24 saatte bir olarak belirlediğimiz süreyi kısaltıp sürekli çıkartırsanız bu durum kullanıcının canını sıkabilir. Bu yüzden bizim tercihimiz bu süreyi çok fazla kısaltmamanız.
Ayrıca daha fazla pop-up çeşidi incelemek isterseniz w3schools üzerinde yayınlanan yazıyı buraya tıklayarak inceleyebilirsiniz.