CSS ile kayan reklam scripti

css-ile-kayan-reklam-scripti
Sitemin sağ alt kısmında bulunan Cüneyt Abi dikkatinizi çekmiştir. Bu oyuncağı aslında “kayan” değil de “sabit” olarak nitelendirmek daha doğru olur fakat bu yöndeki aramaların “kayan reklam” diye yapıldığını gözlemlediğim için bu başlığı koymayı daha uygun gördüm.

Sitenize bu tür sabit oyuncaklar veya reklamlar yerleştirmek aslında sandığınızdan daha kolay, bu işi bir kaç satırlık CSS koduyla kolaylıkla halledebilirsiniz. Yapmanız gereken ilk şey aşağıdaki stil tanımlamalarından size uygun olanı (.sol_alt veya .sag_alt gibi) sitenizin </head> tagından önce eklemek:

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>

Ardından </body> tagının hemen üstüne, oyuncağınızı içerecek olan ve yukarıda stil tanımlamalarını yaptığımız kapsayıyıcı yerleştirmek:

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

class=”sag_alt” bölümünü kendi kullanacağınız şekilde tanımladıktan ve oyuncağınızı “REKLAM İÇERİĞİ BURADA” yazan yere yapıştırdıktan sonra işlem tamam. (Adsense yayıncıları unutmamalı ki Google reklamlarını içeriğin önünde yayınlamak program kurallarına aykırıdır, hesabınız kapatılabilir.)

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

Facebook Yorumları

22 Yorum

  1. Caner
    Yazar

    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 🙂

  2. Ogün

    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!!! :))

  3. Caner
    Yazar

    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 😀

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

  5. Caner
    Yazar

    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.

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

  7. Caner
    Yazar

    Ş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 🙂

  8. njr

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

    üstat buraya kadar geldim. reklam içeriği buraya yazan yere flash bişe koymak istiyorum soru işareti çıkıyor. resim koyunca oluyor, (senin sol alttaki) turhost gibi..
    flash şeyi nasıl koyacam hangi kodlar gerekecek. çömezin eli bayraklısıyım kusura bakma bu kadar ileri derecede sorum için..

  9. Emre Dipi

    kardeş SEN BURDA GÜZELCE ANLATMIŞŞIN AMA BEN Bİ TÜRLÜ BECEREMİYORUM YUKARIDAKİ KODU ARASINA AŞAĞIDAKİNİDE
    ARASINA YAPIŞTIRIYORUM SONRA kodunu altına 20-30tane kodunu yapıştırıyorum seninkiler yukarıda kalıyor sayfayı aşağı indiriyorum gelmiyor, birde resmine ve örnek sayfaya baktım orda hepsinin sabit bir boyutu var benimki sanki genişlik % 90 filan olarak ayarlanmış gibi çıkıyor acaba tarayıcıda mı sorun var ie9 kullanıyorum.

    lütfen yardım ederseniz sevinirim.

  10. Caner
    Yazar

    Belge başlığıyla alakalı olabilir, sayfanızın en üstüne şu kodu yerleştirip tekrar deneyin:

    1
    2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  11. Emre

    düzgün bir şekilde masaüstünde yapıyorum fakat word press de çok zorlaşıyor iş style tagları atıp css e ekliyorum ardından header php dosyasının içinde body açılış tagının altına yapıştırıyorum olmuyor.

  12. ahmettatar

    Ben bu başlığı niye daha önce görmemişim ki.. Caner bende bir maymun koyup bi sigara versene mi dedirtsem diyorum bu Cüneyt abi gibi..:)

  13. emre66.com
    1
    <scripttype="text/javascript">function kapat(){ document.getElementById('divismi').style.display='none';}</script>

    div ismi yazan yere hangi divi koyacaksan onun id sini yazman gerek mesela sol_ust .
    birde galiba burada class şeklinde verilmiş .sol_ust diye
    ben #sol_ust şeklinde yaptım. Bunada işlermi bilmiyorum denersin.

  14. Mehmet

    Merhaba,

    Bunu nasıl yarı sabit yarı kayan yaparız 🙂 yani site ilk açıldığında reklam başlığın hemen yanında solda başlasın ve ziyaretçi sayfayı aşağıya kaydırırken başlığı geçtiğinde reklam ekranda solda sabit kalsın istiyorum. Yani başta kayan, başlığı geçtikten sonra sabit reklam olacak.

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