• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

CSS ve Jquery ile Reklamı Kapat Uygulaması

Konuyu Okuyan Kişiler (0)

bicoder

webmaster.tc
Katılım
5 Eyl 2012
Mesajlar
188
Beğeniler
0
#1


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:

PHP:
<!-- egonomik.com -->
<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

PHP:
<?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:

PHP:
/* 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

Kaynak : CSS ve Jquery ile Session kontrollü sabit reklam scripti — Egonomik