Blogger Kayan Sabit Alanlı Resim Eklentisi (Marquee)

Bloggerde haraketli kayan resimler ile ister sayfa içine HTML olarak, isterseniz Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek witget olarak ekleyebileceğiniz eklentiler

1.) Sağdan Sola Kayan Resimler

<marquee scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

2.) Soldan Sağa Kayan Resimler

<marquee direction="right" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

3.) Sağdan Sola, Soldan Sağa Kayan Resimler

<marquee behavior="alternate" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

4.) Aşağıdan Yukarıya Kayan Resimler (Soldan)

<marquee direction="up" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

5.) Aşağıdan Yukarıya Kayan Resimler (Ortadan)

<marquee direction="up" align="middle" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

6.) Aşağıdan Yukarıya Kayan Resimler (Sağdan)

<marquee direction="up" align="right" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

7.) Yukarıdan Aşağıya Kayan Resimler (Soldan)

<marquee direction="down" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

8.) Yukarıdan Aşağıya Kayan Resimler (Ortadan)

<marquee direction="down" align="middle" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

9.) Yukarıdan Aşağıya Kayan Resimler (Sağdan)

<marquee direction="down" align="right" scrollamount="5">
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
<div>
<img src="RESİM URL" width="100px" heigth="600px" >
</marquee>

scrollamount="5" : Buradaki 5 rakamı geçiş süresidir istediğiniz hıza göre 1,2,3... değiştirebilirsibniz.
RESİM URL : Buraya eklemek istediğiniz resmin URL adresini kopyalayın.
<img src="RESİM URL"> : Satırını azaltarak yada çoğaltarak resim sayısını belirleyebilirsiniz.
<img src="RESİM URL"> : Yerine <a href="#"><img src="RESİM URL"> kullanırsanız
# yerine bir URL yapıştırarak resimlerinize link vermiş olursunuz
 width="100px" : Resim çerçevesinin genişliği

heigth="600px" : Resim çerçevesinin yüksekliği 

resim alanına ölçü koymak için <marquee direction="up" width="500" height="200" scrollamount="5"> satırı düzenlenebilir.
Mause üzerine gelince durması ve çekince devam etmesi için onMouseOver="this.stop()" onMouseOut="this.start() ekleyebilirsiniz.



direction: Bu özellik ile nesnenin kayma yönü belirlenir. Sola, sağa, yukarı ya da aşağı doğru kayabilir.

left: Sola doğru kayma hareketi.

right: Sağa doğru kayma hareketi.

up: Yukarı doğru kayma hareketi.

down: Aşağı doğru kayma hareketi.

bgcolor: <marquee> tagının bulunduğu alanın arkaplan rengi tanımlanır.

width: Kayma alanının genişliğini tanımlar. Özellikle sağa ya da sola doğru kayma hareketi tanımladığımızda bu özelliği kullanmamız gerekir. Kullanmadığında tasarımda bozukluğa sebep olabilir.

height: Kayma alanın yüksekliği tanımlanır.

loop: Bu özelliğin yanına yazılacak değer nesnenin kaç kez kayacağını belirler. Verilen değer kadar nesne kaydıktan sonra ekrandan kaybolur.

scrolldelay: Kayma hızının tanımlandığı özelliktir. Özelliğin aldığı değer ne kadar büyükse nesneler o kadar yavaş kayacaktır.

scrollamount: Kayan nesnenin her hareketinde alacağı yolun tanımlandığı özelliktir. Değerin ölçü birimi pikseldir. Verilen değer ne kadar büyükse kayma hareketi de o kadar büyük olacaktır.

behavior: Bu parametre marquee etiketi ile birlikte kullanıldığında çeşitli değerler alır. Aldığı değerlere göre nesnelerin kayma özellikleri değişir.

alternate: Behavior etiketi alternate değerini aldığında kayan nesneler her iki yöne doğru gidip gelir. Önce sağa doğru gider, daha sonra sola doğru gider. Eğer direction parametresine up değeri atanırsa bu kez önce yukarı daha sonra aşağı doğru kayar.

slide: Behavior parametresi slide değerini alırsa nesneler bir yönde bir kez kayar ve ekranda kalır.

scroll: Behavior parametresi scroll değerini alırsa nesne sürekli bir yönde kayar.

Marquee özelliklerinin hepsi bir arada kullanılabilir. Direction, width, height, scrollamount, scrolldelay, loop, behavior gibi özellikler aynı anda uygulanabilirler. Burada dikkat edilmesi gereken, özelliklerin hepsinin marquee etiketini kapatmadan içine yazılmasıdır.

LİVE DEMO