Home Web Tasarım Sayfa Açılışında Otomatik popup
Sayfa Açılışında Otomatik popup

Sayfa Açılışında Otomatik popup

7.34K
29

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 penceresiyle otomatik olarak karşılamak olacak.  Kısacası sitenize giren kişiler otomatik olarak 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.

hemen-indir-butonu

 

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.

hemen-indir-butonu


(7343)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(29)

  1. Hocam bu popup’te istenilen zamanda kapatılması için “X” veya boş bir yere tıklanınca kapanması için ne yapabiliriz?

    1. Yakup arkadaşım 10 saniye sonra kendini kapatıyor. Pencere kapatma düğmesi yok zaten. zaman ayarlamasını içerik dosyasından ayarlayabiliyorsunuz

  2. 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.

  3. 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.

  4. 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 ???

    1. 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.

  5. 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?

  6. 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

    1. 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)

      1. 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.)

  7. Ö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.

    1. 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.

      1. Ö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.

        1. 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

  8. Ö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

    1. 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…

  9. 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.

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.