Otomatik Açılan Takip Et Butonu

Sitelerinizde bilgilendirici veya benim gibi sosyal ağ profillerinizi ziyaretçilerinize sunmak için popup kullanmak isteyebilirsiniz. Bugün bu popup kurulumu ve kullanımından bahsedeceğim. Kullanacağımız popup wordpress eklentisi olarak değil normal elle ekleyeceğiz.
1- Popup için Gerekli Dosyaları Siteye Ekleme
Popup eklentimiz lightbox olarak açılmaktadır. Bunun için ve görsel olarak gerekli dosyalarımız olan aşağıdaki kodları etiketi üstüne eklemelisiniz. Fakat benim gibi bazı sitelerde çalışmayabilir. Çünkü js kodlarıyla bazen çakışabiliyor. Ben bu yüzden js dosyalarını en alttaki kodundan önce ekledim. Eğer sizde de çalışmaz ve aşağıdaki kodları en alta ekleyecek olursanız .css uzantılı dosyaları etiketi öncesinde bırakınız. Çünkü css uzantılar footerda çalışmaz. Dosyaları eklerken hostunuzdaki yolu eklemeyi unutmayın yoksa çalışmaz !





<script></script>
<script></script>

2- JS kodlarını ekleme
Popup’un açılması için gerekli komutları ekleyeceğiz. Bu komut kodlarında cookie ve linke tıklandığında popup’un açılmasını sağlayan kodlardır. Ben otomatik açılması için bazı kodları sildim. Sizlere bu yüzden ikisinide göstereceğim. Buradaki cookie süresi 15 gündür. 15 gün sonra tekrar ziyaretçiye açılacaktır. Bunun için gerekli süre kısmını değiştirerek ister saatlik isterseniz farklı günlerde yapabilirsiniz. 1000*60*60*15 yazan bölümdeki 15 yerine farklı sayı yazarsanız o kadar gün gösterir. 60 lar ise dakika ve saniyeyi temsil ediyor.
Alttaki kod bir linke tıklandığında açılan popup kodu.

$("document").ready(function (){

// load the overlay

if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}

$(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

});

Eğer sizde benim gibi siteye girince açılsın istiyorsanız aşağıdaki şekliyle ekleyin.

$("document").ready(function (){

// load the overlay

if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
}

});

Bu kodların çalışması için

<script>

js kodu

</script>

şeklinde eklemeyi unutmayın. Bu kodlarda çalışmazsa sitenin en altına tagı altına ekleyerek deneyiniz.
3- HTML Kodları
Aşağıdaki kodlarda popup içeriği içindir.

Click here to open the popup

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.

Subscribe

OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.

Subscribe

Umarım işinize yarayan bir popup olur Yeni aorhan’ını da takip etmeyi unutmayın yakında daha farklı makalelerle sizlerleyiz.

Kaynak: http://www.aorhan.com/otomatik-acilan-takip-et-popup.html

Güzel bir çalışma , tebrikler.