css-jquery-php-sabit-kayan-reklam

CSS ve Jquery ile Session kontrollü sabit reklam scripti

css-jquery-php-sabit-kayan-reklam
Sitenin herhangi bir yerinde sabit duran (zaman zaman “kayan” diye ifade edilen) ve kullanıcı tarafından kapatılıp o oturum boyunca bir daha görüntülenmeyen kullanışlı bir reklam scripti. Aslında sadece reklam scripti diye kısıtlamak doğru değil, çeşitli site duyurularını da bu script sayesinde en verimli şekilde ziyaretçilerinize ulaştırabilirsiniz.

Kullanıcı reklamı veya duyuruyu kapatmak isteyip “kapat” düğmesine tıkladığında sayfa değişmeden jquery aracılığıyla bir session değeri atanıyor ve kutucuk mevcut oturum boyunca bir daha görüntülenmiyor.

Scriptimiz temelde bir kaç satır javascript kodu ve bir tutam CSS’den ibaret. Jquery kütüphanesi import edildikten sonra uygulama için kullanılacak sayfada şöyle bir javascript kodu kullanıyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
    $("#vid_link").click(function(){
        $.post("session.php", {reklam: $("#reklam").val()}, function(data){

     if(data == "1")    {
        $('#alt_reklam').fadeOut('slow', function() {

        // Fade out animasyonu tamamlanınca bir uyarı verdirtiyoruz
         alert('Session değeri atandı ve reklam kapatıldı.\nBu oturum süresince kullanıcı reklamı bir daha görmeyecek');
       });
     } else {
        $("#alt_reklam").html("<b>Hata: Session değeri atanamadı!</b>");
     }
   });
});
 });

// ]]></script>

Bu kodlar “session.php” ismiyle kaydedeceğimiz ve içinde aşağıdaki kodları barındıran dosya ile etkileşim halinde

1
2
3
4
5
6
7
8
<?php
if(isset($_POST['reklam'])){
    session_start();
    $_SESSION['reklam'] = $_POST['reklam'];
    echo "1"; }
else {
    echo "0"; }
?>

Mantık oldukça basit, reklam kutucuğundaki “kapat” düğmesine tıklandığında session.php’ye $_SESSION[‘reklam’] değerinin “kapat” olarak atanmasını söylüyoruz ve session.php eğer atama başarılı olursa “1” olmazsa “0” döndürüyor.

Buna göre, yani eğer dönen değer 1 ise reklam kutucuğu fade out efektiyle kapanıyor ve istenirse kullanıcıya javascript alert ile bu duyuruyu/reklamı bir daha görmeyeceği bilgisi veriliyor.

Sayfanın en altına, yani </body> tagından önce yerleştireceğimiz kutucuğun CSS stil tanımlamaları ise şöyle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Reklam kutucuğu stili */
.alt_reklam {
   float: left;
   padding-top: 18px;
   background: url('images/bottom-bg.png');
   background-repeat: repeat-x;
   width: 100%;
   height: 110px;
   position: fixed;
   right: 0px;
   left: 0px;
   bottom: -4px;
   border-style:none; }

.kapat {
   width: 25px;
   float: right;
   padding-right: 15px; }

Kutucuğun sayfanın altı yerine üstünde çıkması için stil dosyasındaki “bottom: -4px;” ifadesini “top: -2px;” şeklinde değiştirebilirsiniz.

Scriptin detaylı örneği
Demo

Scripti indir (390 Kb):
Download

Facebook Yorumları

4 Yorum

  1. selamlar çok güzel bi uygulama ama ben yapamadım. İndirdiğim scriptekileri nereye koyacağımı bilemedim. yukardı yaptıklarınızıda denedim ama nerelere koyacağımı kestiremedim. yardım edermisiniz

  2. ali eralp

    caner bu jquery session kontrollü scripti rica etsem yaş kontrollü olarak nasıl değiştirebileceğimi tarif edebilirmisin? oyun siteme koymak istiyorumda (bazı oyunlar şiddet içerebiliyor.örneğin:13 yaşından büyüğüm (giriş) 13 yaşından küçüğüm (çıkış) gibi.şimdiden teşekür ederim.

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

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