CSS ile kayan reklam scripti

Yazar: Caner | 9 Temmuz 2009 Perşembe 18:50
Kategori: Web Tasarım
12 Yorum





Sitemin sağ ve sol alt kısımlarında bulunan “müdür” ve “bahşiş verin” kısımları dikkatinizi çekmiştir. Bu nesneler aslında “kayan” içerikler değil de daha çok sabit içerikler olarak nitelendirilebilir. Fakat bu yöndeki aramaların “kayan reklam” diye yapıldığını gözlemleyip bulunabilir olması açısından bu şekilde lanse etmeyi daha uygun buldum. Öncelikle sitenize bu tip oyuncaklar eklemek sanıldığından daha kolay, tamamen CSS ile üstesinden gelebilirsiniz. Bu teknikle sabit reklam veya içeriğinizi sitenizin sağ, sol, yukarı, aşağı veya istediğiniz herhangi bir noktasında görüntüleyebilirsiniz, en güzel tarafı da CSS tekniğiyle hazırlanan bu içeriklerin IE 7-8 , Firefox 3 ve Chrome ile sorunsuz çalışıyor olması.

Tasarladığım sabit içerik scriptinin çalışan örneğine aşağıdaki resme tıklayarak gözatabilirsiniz:
css-ile-kayan-reklam-scripti

Kayan içerik scriptini hazırlamak için yapacağımız ilk şey style bilgilerini atamak olacak, bunun için aşağıdaki kodu sabit içeriğin görüntülenmesini istediğimiz sayfanın </head> tagından önce ekliyoruz:

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
<style type="text/css">
.sol {
    position: fixed;
    left: 4px;
    top: 40%;
    height: 150px;
    width: 65px;
    padding: 4px;
    background-color: #B4DE5A;
    border: 1px solid #000000; }
   
.sag {
    position: fixed;
    right: 4px;
    top: 40%;
    height: 150px;
    width: 65px;
    padding: 4px;
    background-color: #B4DE5A;
    border: 1px solid #000000; }
   
.sol_ust {
    position: fixed;
    left: 4px;
    top: 2px;
    padding: 4px;
    background-color: #82C6FD;
    border: 1px solid #000000; }
   
.sag_ust {
    position: fixed;
    right: 4px;
    top: 2px;
    padding: 4px;
    background-color: #82C6FD;
    border: 1px solid #000000; }
       
.sol_alt {
    position: fixed;
    left: 4px;
    bottom: 2px;
    padding: 4px;
    background-color: #82C6FD;
    border: 1px solid #000000; }
   
.sag_alt {
    position: fixed;
    right: 4px;
    bottom: 2px;
    padding: 4px;
    background-color: #82C6FD;
    border: 1px solid #000000; }
</style>

Tanımlamaları yaptıktan sonra <body> tagının hemen altına reklamlarımızı içerecek olan ve yukarıda style tanımlamalarını yaptığımız div’leri ekliyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="sol">
<br><br>REKLAM İÇERİĞİ BURADA </div>

<div class="sag">
<br><br>REKLAM<br>İÇERİĞİ<br>BURADA  </div>

<div class="sag_ust">
REKLAM İÇERİĞİ BURADA </div>

<div class="sol_ust">
REKLAM İÇERİĞİ BURADA </div>

<div class="sag_alt">
REKLAM İÇERİĞİ BURADA </div>

<div class="sol_alt">
REKLAM İÇERİĞİ BURADA </div>

Görüntülenmesini istediğimiz reklam veya diğer resim dosyalarımızı ise “REKLAM İÇERİĞİ BURADA” yazan yerlere yapıştırdıktan sonra işimiz bitti sayılır. (Adsense yayıncıları unutmamalı ki Google Adsense reklamlarını bir sayfada 3′ten fazla yayınlamak program kurallarına aykırıdır.) Konteyner renklerini ve yazı tiplerini kendi isteğinize göre style kısmından düzenleyebilirsiniz.

Son bir not: kodların çalışması sağlıklı çalışması için sayfanızın en tepesine, <html> tagından önce aşağıdaki belirtgeci eklemelisiniz:

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

(Bu bilgi için Evren arkadaşıma ayrıca teşekkür ederim.
Edit: Düzeltme için de fxdev‘e teşekkür ederim.)

Scriptin çalışan örneği:
CSS ile kayan reklam scripti


Benzer Yazılar

  1. Javascript ile Sahibinden.com benzeri resim galerisi
  2. Mootools ile hareketli sidebar scripti
  3. CSS ve Jquery ile Session kontrollü sabit reklam scripti
  4. Dünyanın en çok para kazanan 30 blogu
  5. “Bozar mı sandın acılar?.. Sinsice olmaz gidişim kapıyı çarpar giderim!…”
  6. CSS ve Javascript ile Modal Dialog / Reklam Kutusu yapımı
  7. Javascript – Geri sayım / Yönlendirme Scripti
  8. PHP – Her satıra farklı renk uygulamak
  9. Javascript ile Kayan Resim Scripti
  10. PHP ile Güvenlik Kodu (Capthca) Scripti

Yazar: Caner

Web Sitesi: http://www.egonomik.com

Johnny Bravo’yum ben. Bu olay “kendini hangi yaşta hissediyorsan o yaştasındır…” felsefesiyle aynı, ne var? (Ne alaka ya çok saçma şeyler yazıyorum farkında mısın-ız? Bu ‘ız’ takısınıda ailecek veya arkadaşlarıyla toplanmış şekilde oturup çekirdek... devamı


12 Yorum » “CSS ile kayan reklam scripti”

  1. Evren

    10 Temmuz 2009 [22:08]

    Sağlıklı çalışması için desek daha doğru olur gibi :)

    Ellerine sağlık çok güzel anlatmışsın.

  2. FxDev

    19 Temmuz 2009 [02:39]

    Sitem için epeydir böyle bir şey arıyordum, görür görmez çullandım…
    Çok teşekkürler ;)

  3. FxDev

    19 Temmuz 2009 [04:51]

    Bu arada sağ üst solt üst derken bir kaç hata yapmışsınız ;)

  4. Caner

    19 Temmuz 2009 [05:03]

    FxDev: ne demek işini gördüyse ne mutu :)
    Düzeltme için ayrıca teşekkür ederim, ara sıra böyle gözden kaçabiliyor işte :)

  5. Egonomik » CSS ve Javascript ile Modal Dialog / Reklam Kutusu yapımı

    21 Temmuz 2009 [23:01]

    [...] önce şu yazımda javascript ile zamanlama fonksiyonu hazırlamayı, şu yazımda ise CSS ile site üzerinde kayan reklam hazırlamayı anlatmıştım. Şimdi ise bu iki fonksiyonu [...]

  6. mustafa

    24 Temmuz 2009 [01:49]

    denicem hemen inş çalışırız emeğinize sağlık :)

  7. Ogün

    18 Ağustos 2009 [16:20]

    Kod güzel, çalışma şaheser zeka mükemmel ancak, bu ve benzeri tıklamaya teşvik eden, reklam vereni zedeleyen her türlü hareket googleden ban sebebidir, neticede siz kullanıcıyı ufak bir tebessümle tıklamaya teşvik ediyorsunuz ancak amaca hizmet etmediği için bu click olan reklam verene oluyor google’ın bunu farketmesi çok tatsız sonuçlanabilir sizi ve diğer kodu kullanacak yada kullanan arkadaşları uyarmak istedim, he nerden mi farkedecek, yerin kulağı vardır!!! :) )

  8. Caner

    18 Ağustos 2009 [16:41]

    Ogün aydınlatma için teşekkürler zaten biliyorduk tekrar hatırladık :) Bu scriptteki ana amaç zaten “al Google reklamı yayınla” değil, sitemin sağ alt tarafındaki “müdür” örneğine de dikkat edecek olursan insanlar sitelerine çeşitli oyuncaklar eklesinler, farklı reklamlar yayınlasınlar dedik. Bir de diğer “bahşiş verin” kısmı için kullandığım şey aslında bambaşka bir reklam mantığıydı fakat daha sonra reklamveren ile anlaşamayınca geçici bir süre adsense yerleştirmiştim tabi taa ki sen çıkıp “yerin kulağı vardır” deyinceye kadar :D

  9. Emre arslan

    17 Ekim 2009 [14:48]

    Dostum senin şu alttaki transparan bg gibi bişi yapıp üstüne bahşiş vereyime tıklayınca  “egonomili sevdiysen bağış yap yerine google reklamı koymak istiyorum hepsini adım adım anletırmısın alta ekledim kayan reklamı ama bg felan ekleyemedim :S

  10. Caner

    17 Ekim 2009 [15:11]

    Emre hepsini adım adım anlatalım da öyle bir teknikle Google reklamı yayınlayamazsın, yayıncı kurallarına aykırı yani farkedilirse hesabın kapatılabilir he riski göze alıyorum diyorsan o ayrı tabi.

  11. Emre arslan

    17 Ekim 2009 [22:01]

    Dostum tamam bahşiş vereyim olsun farketmez bana çekici gelen taraf alttaki facebook tarzı alt çizgi tabi bu transparan olunca daha çok ilgimi çekti nasıl yapıcam ben bunu hadi anlat ;)

  12. Caner

    18 Ekim 2009 [17:00]

    Şimdi diyelim ki .sag_alt { tanımlamasını kullanıyorsun ve içerik sağ alt tarafta görüntüleniyor, onu şu şekilde düzenlersen:

    width: 100%;
    right: 0px;
    left: 0px;
    height: 40px;
    background-image: url(‘arkaplan.png’);

    istediğin sabit alt barı elde etmiş olursun. Ben de bu alttaki bar için şeffaf bir png arkaplan kullandım, sen de ister burdakini çal istersen kendin bir png üret :)

Yorum Bırakın

(Anonim yorumları kabul etmiyoruz)


Yorum yazarken güvenlik kodu girmek istemiyorsanız siteye üye olabilirsiniz.

«
»