Sayfa Açılışında Otomatik popup
Merhaba Arkadaşlar, bu dersimizi bir arkadaşın isteği üzerine yayınlıyorum. Konu içeriği ; Anasayfanıza (index.html) giren kişileri direk popup penceresiyle otomatik olarak karşılamak olacak. Kısacası sitenize giren kişiler otomatik olarak popup penceresiyle karşılaşacaklar. Tabi bu işlevsellik, sizin sitenizin kalitesini düşürebilir. Çünkü kullanıcı sizin sitenize ulaşamadan direk görmek istemediği şeyle karşı karşıya gelecek. Bunun sonucunda sitenizde hit düşüşü yaşayabilirsiniz. Ben size iki türlü popup pencere yapımını anlatacağım.
1. POPUP uygulaması:
ilk önce web editör programızla index.html sayfasını oluşturun veya var olan anasayfanıza <head> ile </head> aşağıdaki kodları yerleştirin.
<head> <script language="javascript"> function pop(){ window.open("popup.html","acılacaksayfa","width=400,height=400,menubar=0,toolbar=0,resizable=0"); } </script> </head>
sonrasında ise yine index.html dosyasındaki <body> etiketinin içine onload=”pop()” eklemelisiniz kısacası şöyle olacak
<body onload="pop()">
yukarıdaki kodda gördüğünüz gibi popup.html sayfası oluşturmanız gerekiyor. popup.html sayfasının içine isterseniz yazı isterseniz resim ekleyebilirsiniz . popup penceresinin boyutlarını yukarıdan istediğiniz gibi değiştirebilirsiniz.
2. POPUP uygulaması:
Yukarıdaki uygulamayı kullanırsanız her defasında sayfanıza giren kişi popup sayfasıyla karşılaşacaktır lakin 2.uygulamayı kullanırsanız sayfanıza giren kişi 1 kere popup sayfanızı görür bir daha girdiğinde ise popup sayfanızı göremez. Tabiki browser’ın çerezlerini silen kullanıcılar tekrar sayfanıza girerse popup sayfanız tekrar göreceklerdir.
Anlatıma geçelim.
index.html sayfanızın yada popup görünmesini istediğiniz sayfanın içindeki <head> ile </head> arasına aşağıdaki kodları yapıştırın.
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <link type="text/css" href="js/basic.css" rel="stylesheet" media="screen" /> <!--[if lt IE 7]> <link type="text/css" href="js/basic_ie.css" rel="stylesheet" media="screen" /> <![endif]--> <link type="text/css" href="js/gg_fb.css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="js/jquery.simplemodal.1.4.1.min.js"></script>
sonra <body> ile </body> arasına aşağıdaki kodları yerleştiriyorsunuz.
<script type="text/javascript">
var sure = 10 ; // Geri sayım sayacının başlayacağı rakam
function Kontrol() {
sure = sure-1;
$("span#1").text(sure); // <span id="1"> </span> olan yerde geri sayım yapacaktır
if( sure > 0 ) setTimeout("Kontrol()", 1000);
}
if(GetCookie('cerez') !== 'omerbozalan' )
{
jQuery(document).ready( function()
{
kapat = (sure-1)*1000 ;
jQuery('.gg-fb').modal({minWidth:"600"}); // Popup burda açılıyor
Kontrol();
setTimeout(function(){ $.modal.close('.gg-fb'); }, kapat ); // Popup burda kapanıyor
SetCookie('cerez','omerbozalan',1); // cerez olusturduk her ziyaretçiye bir kere açılması için
});
}
</script>
<div style="display:none;"><div class="gg-fb">Ömer BOZALAN Web sitemize hoşgeldiniz<img src="js/omerbozalan.png" width="533" height="80" />
<div class="fb-div"><strong> <span id="1" style="color: #ff0000;"> </span> Saniye sonra Kapanacaktır</strong></div></div></div>
kırmızıyla belirtilen alan popup penceresinde görüntülenecek olan içeriktir. Hem resim koyabilirsiniz hemde yazı yazabilirsiniz. Ben iki şeklinide yukarıda gösterdim, hangisini beğenirseniz onu yaparsınız.
NOT: Değişiklik yapıp kaydettiğinizde browserda görebilirsiniz fakat tekrar sayfanızda değişiklik yapıp görüntülemek istediğinizde çalışmaz bu yüzden browser ın çerezlerini silin sonra tekrar çalıştırın.
Diğer css ve js. dosyalarının içeriğini yazmıyorum çünkü sizlere örneğini aşağıdaki linkte vereceğim . Css ve js dosyalarını aşağıda bulabilirsiniz ve sayfanıza ekleyebilirsiniz. Kolay gelsin.
(6437)
Hocam bu popup’te istenilen zamanda kapatılması için “X” veya boş bir yere tıklanınca kapanması için ne yapabiliriz?
Merhaba Paylaşılan Dosyayı İndiridim 5 farklı Tarayıcıdan Test Ettim Ama Bir Türlü Pencereyi Kapatmıyor. Sadece Kendini Kapatıyor.
Teşekküler
Yakup arkadaşım 10 saniye sonra kendini kapatıyor. Pencere kapatma düğmesi yok zaten. zaman ayarlamasını içerik dosyasından ayarlayabiliyorsunuz
Omer bey otomatik acilan tool ne demek? Acaba ornekle aciklayabilir misiniz? Tesekkurler…
buket hanım otomatik açılan tool ile ne demek istediğinizi anlamadım. tool araç demek. Amam otomatik açılan tool ne bilmiyorum.
Teşekkür ederim çok faydalı oldu benim için,
Bir sorum olacak 1 den fazla görsel koyarsak her açılısta farklı görseli görebilirmiyiz.
Merhaba, sorumu değiştireyim otomatik gösterilen png resim yerine html bir sayfa gösterebilirmiyiz.
tabikide gösterebilirsiniz. zaten çalışmada popup.html sayfası oluşturuyor.
Cevap için teşekkkür ederim ama 2. verdiginiz popup öğrneginde bunu yapamadım.
merhaba ömer bey bu popup un modal olanını paylaşabilirmisiniz
birçok sitede buldum denedim çalışıyorlar fakat istediğim gibi çalışan pek yok mesela divin içerigini oldugu gibi açacak ve aynı sayfada birden fazla div ile çalışabilecek bir uygulama varsa paylaşabilirseniz çok sevinirim.
ssadece crome da ilk girişten sonra tekrar açılmıyor, diğer browserlarda sayfa her açıldığında; içerik ya tekrar gözüküyor yada gizlense bile içeriğe eklenen videonun sesi tekrar çıkıyor.sadece açılışda içeriğin çalışabilmesi için yapılabilecek bir şey varmı acaba ???
Emre arkadaşım yazının en sonundaki NOT: kısmında ayrıntılı bir şekilde anlattım. Bu çalışma çerezler yüzünden 1 kerelik görüntüleniyor.
paylaşım için teşekkürler. Çok faydalı oldu.
Merhaba ben wix kullanıyorum ve ne yazıkki sadece html ekleyebiliyorum acaba sizde html olarak sadece kod var mı head body falan siteyi düzenlerken bulamadımda yardımcı olabilir misiniz?
Teşekkürler
teşekkürler
hocam 1. kısmı uygularken head ile head arasına kodu yapıştırınca hata veriyor.
there is a syntax error on line 23. Code hinting may not work until you fix this error
23. satırda :
window.open(“popup.html”,”acılacaksayfa”,”width=400,height=400,menubar=0,toolbar=0,resizable=0″);
kodu var
Ali haydar arkadaşım uygulamayı bilgisayarınıza indirin. Çalışmayan uygulama sizinle zaten paylaşılmamaktadır.
hocam indirdim lakin sizin uyguladığınız yöntem 2. yöntem.bense 1. yöntemi uygulamak yani her girildeğinde pop up görülmesini istiyorum.zaten 1. kısımdaki window.open(“popup.html”,”acılacaksayfa”,”width=400,height=400,menubar=0,toolbar=0,resizable=0″);
}
kodunu dreamweaver a yazdığınızda direk hata çıkıyor.(Hocam bi kastım yok belki haklısınızdır ama bi bakarsanız sevinirim)
hocamız sağolsun 1. kısımda unuttuğu çalışmayı koydu sorunum çözüldü. (2. kısmı uygulayan arkadaşlar pop up ın sürekli çıkmasını isterse “if ile başlayan satır kodunu silerse pop up siteye her girildiğinde gözükür.)
Ömer Hocam;
Öncelikle güzel ve anlaşılır anlatımınız için size teşekkür ederim. Benim birkaç maruzatım bulunmakta. Bunlarıda aşağıda madde madde sıralıyorum. Eğer yardımcı olursanız yarın için beni büyük dertten kurtarırsınız.
NOT: 2. yolu tercih ettiğimi belirtmek isterim.
Soru 1: Sadece belirlemiş olduğumu imajı göstermek istiyorum. (İstanbulda yapılacak olan bir fuarın davetiyesi) O yüzden üstünde altında bir şey yazmasını istemiyorum. Sadece İmajın dışında tam orta alt kısmında Sayaç geri sayımı yapsa ve yanındaSayacı beklemek istemeyenler için bir “Reklamı Geçmek İçin Buraya TIKLAYIN” gibi bir yardımcı olayda istiyorum.
Soru 2: Reklamın Her Defasında yani sayfaı her açışında ziyaretçi karşısına çıkması gerekiyor.
Soru 3: İmajı Ortalayamıyorum. Sol üst köşeye hizalıyor. Beyaz backgroundun hiç olmasını istemiyorum.
Yardımlarınız için şimdiden teşekkür ederim. Arkadaşlarımda kusura bakmasın bu kodlama olaylarında yeni sayılırım.
Anıl arkadaşım sitemizin gayesi web tasarım anlatımlarıyla kişilerin gelişimlerini artırmak. Lakin senin bahsettiğin konu yapamadığın bir işin yapımıyla alakalı. Malesef bu konu hakkında yardımcı olamayacağım. Bu uzun bir iletişim isteyen bir durum, buradan anlatılacak bir durum değil, sende farkındasın. Bizim yardımcı olduğumuz konular anlatımı yapılan konulardır. En kısa sürede bu işi yapan birisini bulmalısın. kolay gelsin.
Ömer Bey bu konu hakkında size özelden mesaj attım ve buradan bunu paylaşarak görüşelim dediniz. Bugünde buradan paylaştım ama bu seferde bu şekilde cevap veriyorsunuz. Gerçekten enteresan.
Anıl arkadaşım, o kadar çok kişiye cevap veriyorum ki anlatamam. özelden gönderilen msjları okumadan direk aynı mesajı herkese gönderiyorum. Çünkü iletişim kısmında koskoca yazdım. özelden mesaj atmayın diye.. Ama hala e-mailime mesaj atıyorsunuz. :)Senin mesajını şu an burada yazdığın için e-mailden okudum. Kusura bakma. Kime ne cevap verdiğimi bilmiyorum ve hatırlamıyorum. Çünkü bu siteyi ayda 40 bin kişi ziyaret ediyor ve emin ol bunun 40 ta birisi yardım istese 1000 kişi eder. Umarım beni şu an anlamışsındır. YANİ… Birde soruların bir tane değil… 🙂 Yani hocam al sen yap diyorsun? öyle olsa işimiz iş desene anıl
Merhaba Hocam,
Bu Popup’u sayfaya yönlendirmem için ne yapmam gerekir. Yardımınızı bekliyorum.
Yusuf arkadaşım popup’ı sayfaya yönlendirme derken ne demek istedin?başka bir sayfaya mı? kendi sayfana mı? …
Ömer hocam öncelikle paylaşımınız için teşekkür ederim. Yapmış olduğunuz çalışmayı indirdim ve index sayfama benim index sayfamda birde slider var ikisi çakışma yaşadı sizin vermiş olduğunuz kodları head bölümünde bulunan slider kodlarının altına yapıştırdığımda popup çalışıya ama slider çalışmıyor slider kodlarını sizin yayınlamış olduğunuz kodların altına yapıştırdığımda ise slider çalışıyor ama bu seferde popup çalışmıyor bu sorunu nasıl çözebilirim yardımcı olursanız sevinirim
Altan arkadaşım sitemizde anlatımı yapılmış bir konudur. Arama alanına jquery yazarsanız makaleyi bulup okuyabilirsiniz. yorumları da göz ardı etmeyin…
Merhaba, öncelikle teşekkür ederim.
2. yöntem için yazıyorum;
Sitem de başvuru formu mevcut, ben index açıldığında karşılarına başvuru formunu doldurmak için tıklayın veya çıkmak için çarpıya basın gibi bir şey yapmak istiyorum.
Bunu nasıl yapabilirim teşekkür ederim.
İyi çalışmalar.
İyi günler ben açılan popup sayfasında video göstermek istiyorum site açılınca direk video oynatmaya başlayacak bunu nasıl yapabilirim yardımcı olurmusunuz.
Ömer hocam ellerinize saglik çok güzel bir paylasim olmuş.Bu popup ile bir form hazirladim fakat verileri veri tabanina kaydettiremiyorum formu PHP ile yazdim yardımcı olurmusunuz
Ömer hocam pop up ekranda çıkıyor ancak kısa bir süre kalıyor. Bunun ayarını nerden değiştirebiliyoruz.
Merhaba hocam,
öncelikle paylaşımınız için teşekkürler. bilgisayarımda gayet güzel çalıştı ancak;
popup penceresi akıllı telefon ya da tabletlerde açılmıyor. Bunun sebebi ne olabilir , nasıl düzeltilebilir?
Tesekkürlerimle,
hocam her yerde bunu arıyordum tşkr