Pop-Up Reklam Nedir?
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.
“Belirli saatte çıkan pop-up reklam yapımı” yazımız buraya kadardı. Diğer yazıları incelemeyi ve hoşunuza gittiyse yorum bırakmayı unutmayın.
Bana ulaşmanız gerekirse header alanında yer alan “İletişim” kısmından mesajınızı yazmanız yeterlidir.