TR Kodlama’ya ilk girdiğinizde ve her beş sayfa gezdiğinizde sizden bizi desteklemeniz için tıklamanızı istediğimiz bir reklam görüyorsunuz. Bu makale de bunun nasıl yapılacağını anlatıyorum.
TR Kodlama’daki reklam şu şekilde çalışır. Sayfa yüklenir. Siteyi tamamen kaplayacak koyu arkaplan renkli bir div oluşturulur. Bunun hemen önüne reklam konulur. Bu sistemin çalışma mantığı budur.
Şimdi öncelikle işin HTML kısmını yazıyorum:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="kaplayici"><!-- Genel arkaplan --> <!-- Reklam Alanımız --> <div class="reklam_popup"> <img src="birseyler.png" width="800" height="600" /><!-- Reklamımız --> </div> <!-- Reklam Alanı Bitişi --> <!-- Bu alanda geri sayım işlemimiz yer alıyor. Ve bir de metnimiz var --> <div class="yazi"> <span id="sayac">15</span> sn. sonra kalkacak.. <b>Yazılar yazılar yazılar..</b> </div> <!-- Bu da 15 sn. beklemek istemeyen kullanıcılar için Reklamı kapat seçeneğimiz.. <span class="kapat" onclick="kapat()">Kapat</span> </div> |
Şimdi birde bunun CSS’ini paylaşalım hemen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.kaplayici{ background-color: #DDD; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; z-index: 10000000; } .reklam_popup{ position: fixed; z-index: 9999; height: 300px; width: 336px; left: 10px; top: 30px; } div.yazi{ position: fixed; z-index: 9999; width: 100%; left: 10px; top: 3px; line-height: 15px; color: white; } div#sayac{ font-weight: bold; font-size: 16px; } span.kapat{ position: fixed; top: 15px; left: 770px; font-weight: bold; font-size: 14px; z-index: 9999; cursor: pointer; } |
Yetmedi! Birde en önemli silahımız olan jQuery var. Bu kodların çalışması için jQuery kütüphanesini sayfaya çağırmanız gerektiğini unutmayın:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Bu fonksiyon Kapat yazısına tıklatığımız zaman bütün o html etiketlerini sayfadan kaldırır. function kapat(){ $(".kaplayici").remove(); } // Geri sayım fonksiyonudur. 15 saniyeden geriye sayar. var enaz=0; function geriSayim(){ var deger=parseInt($('#sayac').html()); $('#sayac').text(deger-1); if(deger-1!=enaz){ setTimeout('geriSayim()',1000); } else{ kapat(); } } // Ve geri sayım fonksiyonunu çalıştırdık geriSayim(); |
Şimdi birde PHP’de SESSION’larla bu kullanıcının giriş çıkışlarını kontrol edelim. Kişi ilk defa giriyorsa ekrana bu reklamı bastıralım. Daha sonra da her 5 sayfa görüntülemesinden sonra ekrana bu reklamı bastırmaya devam edelim.
Sonuç olarak karşımıza şu şekilde bir ürün çıkıyor. Aşağıdaki kod başarılı bir şekilde çalışıyor. Şimdi index.php adında bir dosya oluşturun ve içine aşağıdaki kodları yazın:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<?php # "kacinci" isimli oturum kullanıcının o oturumda siteye kaçıncı girişi olduğunu kontrol ediyor. # her sayfa yenilediğinde $_SESSION["kacinci"] bir artıyor # ilk sayfa görüntülediğinde ve her 5 sayfa görüntülediğinde $bastir = 1 oluyor # $bastir = 1 olduğu durumlarda <body> etiketleri arasındaki reklam çalışır hale geliyor if(!isset($_SESSION["kacinci"])){ $_SESSION["kacinci"] = 0; $bastir = 1; } else{ $_SESSION["kacinci"] = $_SESSION["kacinci"] + 1; if(($_SESSION["kacinci"]%5)==0) $bastir = 1; else $bastir = 0; } ?> <html> <head> <title>jQuery Reklam</title> <script type="text/javascript" src="jQuery.js"></script> <style> .kaplayici{ background-color: #DDD; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; z-index: 10000000; } .reklam_popup{ position: fixed; z-index: 9999; height: 300px; width: 336px; left: 10px; top: 30px; } div.yazi{ position: fixed; z-index: 9999; width: 100%; left: 10px; top: 3px; line-height: 15px; color: white; } div#sayac{ font-weight: bold; font-size: 16px; } span.kapat{ position: fixed; top: 15px; left: 770px; font-weight: bold; font-size: 14px; z-index: 9999; cursor: pointer; } </style> </head> <body> <?php if($bastir == 1){ ?> <div class="kaplayici"> <div class="reklam_popup"> <img src="reklam.png" width="800" height="600" /> </div> <div class="yazi"> <span id="sayac">15</span> sn. sonra kalkacak.. <b>Reklama tıklayarak bize destek olabileceğinizi unutmayın...</b> </div> <span class="kapat" onclick="kapat()">Kapat</span> </div> <script> // Bu fonksiyon Kapat yazısına tıklatığımız zaman bütün o html etiketlerini sayfadan kaldırır. function kapat(){ $(".kaplayici").remove(); } // Geri sayım fonksiyonudur. 15 saniyeden geriye sayar. var enaz=0; function geriSayim(){ var deger=parseInt($('#sayac').html()); $('#sayac').text(deger-1); if(deger-1!=enaz){ setTimeout('geriSayim()',1000); } else{ kapat(); } } // Ve geri sayım fonksiyonunu çalıştırdık geriSayim(); </script> <?php } ?> </body> </html> |
Arkaplan gri ama transparan olsun isterseniz aşağıdaki kodu kullanmalısınız. Aşağıdaki kodda .kaplayici class’ına opacity değerleri verdik. Ve bu class’ın bağlı bulunduğu divin için boş bıraktık. Farklı opacity değerleri kullanmak için TR Kodlama’nın CSS Opacity Oluşturucusu‘nu kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<?php # "kacinci" isimli oturum kullanıcının o oturumda siteye kaçıncı girişi olduğunu kontrol ediyor. # her sayfa yenilediğinde $_SESSION["kacinci"] bir artıyor # ilk sayfa görüntülediğinde ve her 5 sayfa görüntülediğinde $bastir = 1 oluyor # $bastir = 1 olduğu durumlarda <body> etiketleri arasındaki reklam çalışır hale geliyor if(!isset($_SESSION["kacinci"])){ $_SESSION["kacinci"] = 0; $bastir = 1; } else{ $_SESSION["kacinci"] = $_SESSION["kacinci"] + 1; if(($_SESSION["kacinci"]%5)==0) $bastir = 1; else $bastir = 0; } ?> <html> <head> <title>jQuery Reklam</title> <script type="text/javascript" src="jQuery.js"></script> <style> .kaplayici{ background-color: #DDD; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; z-index: 9990; -moz-opacity: 0.70; -khtml-opacity: 0.70; opacity: 0.70; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); filter:alpha(opacity=70); } .reklam_popup{ position: fixed; z-index: 9999; height: 300px; width: 336px; left: 10px; top: 30px; } div.yazi{ position: fixed; z-index: 9999; width: 100%; left: 10px; top: 3px; line-height: 15px; color: white; } div#sayac{ font-weight: bold; font-size: 16px; } span.kapat{ position: fixed; top: 15px; left: 770px; font-weight: bold; font-size: 14px; z-index: 9999; cursor: pointer; } </style> </head> <body> <?php if($bastir == 1){ ?> <div class="kaplayici"></div> <div class="reklam_popup"> <img src="reklam.png" width="800" height="600" /> </div> <div class="yazi"> <span id="sayac">15</span> sn. sonra kalkacak.. <b>Reklama tıklayarak bize destek olabileceğinizi unutmayın...</b> </div> <span class="kapat" onclick="kapat()">Kapat</span> <script> // Bu fonksiyon Kapat yazısına tıklatığımız zaman bütün o html etiketlerini sayfadan kaldırır. function kapat(){ $(".kaplayici").remove(); } // Geri sayım fonksiyonudur. 15 saniyeden geriye sayar. var enaz=0; function geriSayim(){ var deger=parseInt($('#sayac').html()); $('#sayac').text(deger-1); if(deger-1!=enaz){ setTimeout('geriSayim()',1000); } else{ kapat(); } } // Ve geri sayım fonksiyonunu çalıştırdık geriSayim(); </script> <?php } ?> </body> </html> |
jQuery geri sayımı ile ilgili fonksiyonu daha önce paylaşmıştık. Bu sayfadan onunla ilgili bilgi alabilirsiniz. Umarım faydalı olmuştur.
Kolay gelsin,
Yorumlar