Senin, 05 Mei 2014

Mebuat Teks/gambar bergerak pada tampilan web/blog

                                 Tag Marquee

Salah satu cara untuk menarik perhatian pada suatu kata atau kalimat dalam suatu blog atau website adalah dengan membuat variasi pada kata atau kalimat tersebut.
Diantaranya dengan menggunakan Marquee / text berjalan ( pergerakkan text dari kiri ke kanan atau kanan ke kiri, ke atas ke bawah atau sebaliknya, juga gabungan atau variasi dari keduanya).

Maka dari itu, Marquee merupakan salah satu tag  yang favorit digunakan untuk mempercantik tampilan blog / web kita. marquee bukan hanya digunakan untuk membuat text berjalan tapi juga dapat digunakan untuk gambar berjalan pada "header". 

Berikut adalah contoh-contoh koding marquee untuk teks bergerak :

1.  Bergerak dari kanan ke kiri
<marquee> Kata / kalimat yang akan ditampilkan </marquee>

2. Bergerak dari kiri ke kanan

 <marquee direction="right"> Kata / kalimat yang akan ditampilkan </marquee>
3. Bergerak dari kanan ke kiri dan dari kiri ke kanan

 <marquee behavior="alternate"> Kata / kalimat yang akan ditampilkan </marquee>
4.  Bergerak dari bawah ke atas

 <marquee direction="up">Kata / kalimat yang akan ditampilkan </marquee>
5. Bergerak dari Atas ke Bawah


 <marquee direction="down"> Kata / kalimat yang akan ditampilkan   </marquee>
6. Bergerak dari bawah ke atas  dan dari Atas ke Bawah

 <marquee behavior="alternate" direction="up">Kata / kalimat yang akan ditampilkan </marquee>
7. Bergerak   Zigzag

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right"> Kata / kalimat yang akan ditampilkan  </marquee></marquee>  
8. Marquee dengan background warna

 <span style="color: white;"><marquee direction="left" style="background: RED;">Kata / kalimat yang akan ditampilkan</marquee></span>
9. Marquee dengan Border <marquee style="border: BLUE 2px SOLID;">Kata / kalimat yang akan ditampilkan</marquee>
Berikut adalah Koding Marquee untuk "gambar bergerak" :
Sebenarnya sama saja kodingnya, yang berbeda adalah kita harus memanggil gambar yang kita mau tampilkan. kita harus menyimpan gambar tersebut dalam satu folder yang sama dengan html.
jika sudah, berikut koding marquee gambar :
<marquee>
<img src="lokasi url image 1">
<img src="lokasi url image 2">
<img src="lokasi url image 3">
<img src="lokasi url image 4">
<img src="lokasi url image 5">
<img src="lokasi url image 6">
</marquee>
Dan seterusnya........... 
 
 
 

 
 

5 komentar: