12 Şubat 2012 Pazar

Kayan Yazı marquee Etiketi

   HTML'nin içerdiği <marquee> etiketi kayan yazılar oluşturmak için kullanılır. Bu etiketle metini (içeriği) belirli bir hızda yatay veya dikey olarak ekran üzerinde hareket ettirebilirsiniz. Bloğunuz da veya sitenizde reklamlarınızı, içeriklerinizi veya bağlantılarınızı kayan yazı şeklinde yapabilirsiniz. Blogger'da kayan yazı! Fakat çok fazla animasyona (kayan yazı) sahip bir sayfanız varsa siteyi kullanan okuyucuların dikkatleri dağılabilir. Ayrıca bu etiket W3C tarafından onay almamıştır. (W3C web standartlarını belirleyen, düzenleyen kurumdur.) Microsoft ve diğer tarayıcılar bu etiketi tanımasına rağmen W3C bu etiketi kabul etmedi.

   ÖNEMLİ NOT : Google Adsense Program Politikaları gereği google reklamlarını kayan yazı içerisine alamazsınız. (Tıklamaları Teşvik Etme: Reklamları, kayan kutu komut dosyasının içine yerleştiremez.)

   Bu etiket ile örnekler vermeden önce bu etiketin alabileceği öznitelik değerleri hakkında biraz açıklama yapma gereksinimi duydum:

<marquee> Etiketi Öznitelikleri

Kayma stilinin ayarlanması
<marquee behavior="DEĞER"> behavior özniteliği 3 değer alabilir.
behavior="scrool"
behavior="alternate"
behavior="slide"
   Bu nitelik içeriğin nasıl hareket edeceğini seçmemizi sağlar. Varsayılan değer "scrool"dur. Özniteliğe "scrool" değeri verilirse, içerik belirtilen yönde devamlı olarak kaymaya devam edecektir (Soldan sağa - soldan sağa). Özniteliğe "alternate" değeri verilirse, içerik belirtilen yönden diğer yöne, diğer yönden belirtilen yöne kayma gerçekleşecektir (Soldan sağa - Sağdan sola). Özniteliğe "slide" değeri verilirse, içerik belirtilen yönden kaymaya başlar ve sona geldiğinde durur.

Kayma yönünün ayarlanması
<marquee direction="DEĞER"> direction özniteliği 4 değer alabilir.
direction="left"      Sağdan Sola
direction="right"      Soldan Sağa
direction="up"      Aşağıdan Yukarıya
direction="down" Yukarıdan Aşağıya
Bu değer ataması yapılmamışsa varsayılan değer "left"dir. Yani kayma sağdan sola doğrudur.

Kayma sayısının ayarlanması
<marquee loop="3">
Bu içeriğin atadığımız değer kadar kayarak gelmesini sağlar. Internet Explorer'da bu etiketi kullanırsanız, kayma atadığımız değer kadar kayacak ve son konumda duracaktır. Diğer tarayıcılarda farklılık gösterebilir.

Kayma adım aralığının ayarlanması
<marquee scrollamount="1">
Bu öznitelikle içeriğimizin kaç piksel kaymasını istiyorsak o değeri atıyoruz. Varsayılan değer 6'dır. Yani buradaki değer arttıkça içeriğimiz daha hızlı kayacaktır.

Her adım arasındaki duraksama süresinin ayarlanması
<marquee scrolldelay="100">
   Bu öznitelik içeriğimizin her kayma hareketini kaç ms'de (1000 ms = 1 sn) yapması gerektiğini tanımlar. Bu değer 60'dan küçük olamaz, 60'dan küçük bir değer ataması yapılırsa tarayıcı bu değeri 60 olarak alacaktır. Internet Explorer kullanıyorsanız ve gerçekten çok hızlı bir kayma istiyorsanız, bu niteliğe 20 değeri atayın ve truespeed özniteliğini true olarak atayın. (truespeed özniteliği hemen aşağıdadır.)

Duraksama süresi 60'dan küçükse ayarlar
<marquee truespeed="DEĞER">
truespeed="true"
truespeed="false"
scrolldelay özniteliğini 60'dan küçük yaptıysak bu değeri tarayıcının es geçmemesi için, truespeed özniteliğini true olarak atamalısınız.

Arkaplan renginin ayarlanması
<marquee bgcolor="rgb(255, 0, 0)"> 
rgb yerine Hex kodunuda kullanabilirsiniz #000000; Bu öznitelik ile arkaplan  renk ataması yapılmaktıdır. Yazı bu rengin üzerinde kayacaktır.

Genişlik ve yüksekliklerin ayarlanması
height="100px"
height="80%
width="200px"
width="70%"
   Genişlik ve yükseklik değerlerini istediğiniz değere göre yapabilirsiniz. İster yüzdelik, ister piksel cinsinden genişlik. Yüzde değeri; şu şekilde hesaplanır: Örneğin kayan yazıyı <body>...</body> etiketleri arasında kullanacaksınız; belge genişliği nedir; 500px %80 ayarlanan içeriğin genişliği 400px olacak ve ortalanacaktır.

Boşlukların ayarlanması
vspace="20px"
vspace="80%"
Yukarıdan kaç piksel aşağıda olmasını istiyorsak bu atamaya onu yazıyoruz.
hspace="20px"
hspace="80%"
Soldan kaç piksel sağda olmasını istiyorsak bu atamaya onu yazıyoruz.

Marque etiketini nereye yerleştirebilirim?

   Üst Bilgi (header), alt bilgi (footer), yan menülere (sidebar) veya yazılarınıza(post) kısacası istediğiniz her yere bu etiketleri yerleştirebilirsiniz. Yan menülere ekleme yapmak için Bloğunuz - Yerleşim - Gadget Ekle - HTML/Javascript yolunu izleyin ve kodlarınızı bu kutu içerisine yazın. Yazılarınıza ekleme yapmak istiyorsanız. "Oluştur" bağlantısının yanında HTML bağlantısına tıklayın ve kodlarınızı buraya yazın.

Marquee Örnekleri

Örnek 1
<marquee bgcolor="#F9A7B0">Bu sağdan sola kayan bir metindir.</marquee>
Bu sağdan sola kayan bir metindir.

Güzelll! Bu yazı sağdan sola doğru devamlı olarak kayacaktır. Arkaplan rengini istediğiniz hex kodu ile değiştirebilirsiniz. Varsayılan değerler scrool ve left.

Örnek 2
<marquee behavior="alternate" width="80%" bgcolor="#F9A7B0">Bu yazı sağdan sola soldan sağa kayan yazıdır.</marquee>
Bu yazı sağdan sola soldan sağa kayan yazıdır.

Eğer yazı devamlı olarak kaymıyorsa bu özniteliği tarayıcınız desteklemiyordur. alternate özniteliğini kullanmayınız. Genişlik %80 olarak tanımlandı.

Örnek 3
<marquee scrolldelay="150" direction="up" width="300px" height="100px" bgcolor="#F9A7B0">Bu yazı aşağıdan yukarıya doğru kayar.
Eğer sonraki metinin bir alt satırdan gelmesini istiyorsanız. <p></p> etiketleri arasına alın.</marquee>
Bu yazı aşağıdan yukarıya doğru kayar.
Bu içerik p etiketleri arasındadır.


Scrolldelay 150 olarak atandı. Bu değeri düşürerek yazının hızlanmasını sağlayabilirsiniz.

Örnek 4
<marquee hspace="50%" direction="down" scrollamount="2" height="100px" bgcolor="#F9A7B0">Bu yazı yukarıdan aşağıya doğru kayar.
Eğer sonraki metinin bir alt satırdan gelmesini istiyorsanız. <p></p> etiketleri arasına alın..</marquee>

Bu yazı yukarıdan aşağıya doğru kayar. Eğer sonraki metinin bir alt satırdan gelmesini istiyorsanız p etiketleri arasına alın..


Yazı renklerini ve stilini değiştirmek isterseniz.<span> </span> etiketleri arasına marquee etiketini alabilirsiniz.
Örnek 5
<span style="color:#151B8D; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#F9A7B0 ">Bu yazı soldan sağa doğru kayar ve yazı bold ve mavi renktedir.</marquee></span>
Bu yazı soldan sağa doğru kayar ve yazı bold ve mavi renktedir.

Yazılarınızı bu yöntemle istediğiniz gibi renklendirebilirsiniz.

Örnek 6
<span style="color:#6AFB92; font-size:xx-large; font-family:verdana; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#F9A7B0">Bu yazı soldan sağa doğru hareket eder.</marquee></span>
Bu yazı soldan sağa doğru hareket eder.

Aynı yöntemle yazı boyutunu, kalınlığını vs. ayarlamaları yapabilirsiniz.

EN ÖNEMLİ Örnek

Ziyaretçiler bu kayan yazıları okumak isteyebilirler, onlar için bir kolaylık yaparak mouse kayan yazının üstüne geldiği zaman durmasını, üstünden ayrıldığı zamanda devam etmesini sağlayabilirsiniz.

Son Örnek
<marquee bgcolor="#F9A7B0" onmouseover="this.stop()" onmouseout="this.start()">Bu yazı normal özelliklerde kayan bir yazıdır, tek farkı fare üzerine gelince durur, çekilince devam eder.</marquee>
Bu yazı normal özelliklerde kayan bir yazıdır, tek farkı fare üzerine gelince durur, çekilince devam eder.

Umarım bilgiler işinize yarar!
Bu bilgiyi kaynağı link olarak belirtmek şartıyla sayfanızda paylaşabilirsiniz.

İyi bloglamalar...

3 yorum:

ofiste ders çalışırken çok iyi oluyor güzel bilgiler bu bilgilerin bazılarıda bir çok sitede yok :))

Bu yorum yazar tarafından silindi.

üstat, elinize sağlık harika açıklama.
bir detay sormak isterim: mesela 5 ayrı cümlemiz olsa; biri bitince ikincisi yandan girsin, hepsi bitince ilk cümleden başlasın istersek nasıl çözeriz acaba?

Yorum Gönder