Kayan Sabit Alanlı Resim Eklentisi (Marquee)

HTML Kayan Resim Kodları


Bloggerde kayan resimler ile ister sayfa içine HTML olarak, isterseniz Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek gadget olarak ekleyebileceğiniz eklenti kodları için marquee etiketinden yararlanabilirsiniz.





1.) Sağdan Sola Kayan Resimler

<marquee scrollamount="5">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
</marquee>


2.) Soldan Sağa Kayan Resimler

<marquee direction="right" scrollamount="5">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
</marquee>



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


<marquee behavior="alternate" scrollamount="5">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
<img src="RESİM URL">
</marquee>



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

<marquee direction="up" scrollamount="5">
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
</marquee>


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

<marquee direction="up" align="middle" scrollamount="5">
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
</marquee>


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

<marquee direction="up" align="right" scrollamount="5">
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
</marquee>



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

<marquee direction="down" scrollamount="5">
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
</marquee>


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

<marquee direction="down" align="middle" scrollamount="5">
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
</marquee>



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

<marquee direction="down" align="right" scrollamount="5">
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
<div>
<img src="RESİM URL">
</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
Resim büyüklüğü : Eklediğiniz resimlerin en ve boy px (piksel) leridir. Çerçevesiz olduğundan aynı büyüklükte görsel için aynı büyüklükte resim ölçüsü (en-boy) kullanılmalıdır.


Blogger Kayan Sabit Alanlı Resim  Kodları


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.


HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Editörünü kullanabilirsiniz.

Yorumlar

  1. kayıyor tamam da resme tıkladığımda beni başka bir url'ye göndermesini istiyorum

    YanıtlaSil
    Yanıtlar
    1. <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

      örnek

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

      Sil
  2. merhablar eklediğim resmin başta sağa sonra aşağıya doğru gitmesini istiyorum yardımcı olabilir misiniz?

    YanıtlaSil
    Yanıtlar
    1. Bunun için bir slider benzeri kod yazmak yada bir gif oluşturmak gerekir.

      Sil
  3. Selamlar .

    onMouseOver="this.stop()" onMouseOut="this.start() bu kodu nereye ekleyeceğiz. Ben hangi satıra eklesem yazı şeklinde çıkıyor.

    YanıtlaSil
    Yanıtlar
    1. <marquee direction="down" onMouseOver="this.stop()" onMouseOut="this.start()">YAZINIZ BURAYA</marquee>

      Sil
  4. Adsız24.3.22

    Merhaba sağdan sola doğru kayan resimlerde sağdan resimlerin geçişi bitmeden soldan aynı şekilde çıkmalarını nasıl sağlarız devamlı bir döngü nasıl sağlarız?

    YanıtlaSil
    Yanıtlar
    1. Selamlar, onun için kod yazmak gerekir. İnternetten slider örneklerinden faydalanarak istediğiniz gibi bir eklenti oluşturabilirsiniz.

      Sil
  5. Adsız2.1.23

    Floating Fixed Field Image Plugin (Marquee)

    YanıtlaSil

Yorum Gönder

🔺 YUKARI ÇIK 🔺