Wordpress, Wordpress Dersleri

WordPress Günde Bir Kez Açılan Popup

113377 HTML programming code blue simplicity 748x421 710x400 - Wordpress Günde Bir Kez Açılan Popup

HTML ile Günde Bir Kez Görünen IFrame

Basit ama etkili olan günde bir kez görünen popup kodunu siz değerli okurlar için derledim ve düzenledim. Bu günde bir kez görünen pencere kodunu istediğiniz gibi özelleştirebilirsiniz, bunun için yapmanız gereken her şeyi size anlatacağım.

492195 languages programming HTML 1 - Wordpress Günde Bir Kez Açılan Popup

WordPress Günde Bir Gözüken Pencere Oluşturma

Bu derlediğim günde bir kez gözüken pop-up kodunu wordpress için uyarlamak için yapmanız gereken basit bir kaç şey bulunuyor. Bu yapacağınız değişiklikler temanıza göre de değişiklik gösterebilir.

Head Arasına Eklemeniz Gereken Kod

Bir çok wordpress temasında header kısmına kod eklemeniz için bir alan bulunmakta fakat eğer sizin kullandığınız temada böyle bir seçenek yoksa izlemeniz gereken yol çok basit. WordPress panelinizden görünüm kısmında bulunan düzenleyiciye tıklayın. Karşınıza çıkan ekrana anladım diyerek geçin.

Aşağıdaki görselde gözüken sağ kısımdan Tema üst bölümünü seçin ve kodlar bulunan alandan <head> ile başlayıp </head> ile biten alanı bulun.

wordpress tema düzenleyici 1024x576 - Wordpress Günde Bir Kez Açılan Popup

Görselde gördüğünüz <head> ve </head> kodlarının arasına aşağıda bulunan kodu ekleyin.

<link rel="stylesheet" href="popup/stil.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="popup/script.js" type="text/javascript"></script>
<style type="text/css" media="screen">
		body {font-size:16px; !important}
		@media (max-width: 592px){
			#popupContact{display:none;position:fixed;_position:absolute;height:430px;width:280px;background:#FFFFFF;border:2px solid #efefef;border-radius : 5px;z-index:2;padding:12px;font-size:13px;}
		}
	</style>
<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var a=getCookie("popupbirkereacil");
if (a!=null && a!="")
  {

  }
else
  {
	centerPopup();
    loadPopup();
    setCookie("popupbirkereacil",a,1);
  }
}
</script>

Body Arasına Eklemeniz Gereken Kod

Daha sonra aynı sayfada bulunan head kodunun altında body ile başlayan kodda düzenleme yapmamız gerekiyor. Örnek olarak aşağıdaki kodu inceleyebilirsiniz.

<body onload="checkCookie()">

Yani body olan kodun içerisine basit bir kod daha ekliyoruz.

Son olarak bu düzenleme yaptığımız kod satırının altına bir kod daha ekliyoruz ve işimiz bitiyor.

<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Başlık</h1>
<p id="contactArea">
			Bu alanı HTML ve CSS ile düzenleyebilirsiniz.
			<br/><br/>
			Pencereyi kapatmak için üç yöntem var.
			<br/><br/>
			Sağ üstten "x" butonu, sayfanın boş bir kısmı veya ESC tuşu.
			<br/><br/>
</p>
</div>
<div id="backgroundPopup"></div>



Örnek Demo

Örnek Demo adresinden günde bir kez çalışan popupu deneyebilirsiniz.

Tüm Kodları İndir

Rar dosyası olarak bu adresten wordpress için her gün bir kez açılan pencere kodunuu indirebilirsiniz.

 

Eğer merak ettiğiniz bir konu varsa yorum atabilirsiniz.

Kaynak

Beğenebileceğin İçerikler

1 yorum

  1. 1
    • 2

      Rar dosyası içerisinde bulunan css dosyasını düzenleyerek yapabilirsiniz.

      Yanlış hatırlamıyorsam siz R10’dan sormuştunuz bunu, oradan cevap verirseniz özel olarak yardımcı olabilirim.

Bir Cevap Yazın

E-posta adresin yayınlanmayacak. Zorunlu alanlar * ile işaretlendi

Yorum yazarken kullanabileceğin HTML etiketleri: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>