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

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

22 Yorum

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