Beberapa bagian dari blog kita dapat dibuat beranimasi, misal teks yang selalu berubah, menu yang terus menggulung, daftar link yang terus berputar dan sebagainya. Dan ternyata tidak sulit untuk melakukan hal tersebut. Pada trik kali ini, kita coba untuk melakukan animasi pada beberapa bagian yang berkaitan dengan teks. Sedikit pengetahuan HTML memang diperlukan. Kita akan memanfaatkan tag marquee untuk menampilkan teks yang dapat berjalan di browser.
Beberapa atribut yang dapat digunakan diantaranya pada tabel berikut:
Beberapa atribut yang dapat digunakan diantaranya pada tabel berikut:
| Atribut | Keterangan | Contoh Penggunaan |
| Marquee | Membuat teks berjalan | <MARQUEE>Teks yang lagi jalan</MARQUEE> |
| ALIGN=TOP, MIDDLE, BOTTOM | Menentukan perataan teks di sekitar marquee | <MARQUEE ALIGN=TOP> teks diratakan dengan bagian atas dari marquee</MARQUEE> |
| BEHAVIOR= SCROLL, SLIDE, ALTERNATE | Menentukan cara penampilan teks | <MARQUEE BEHAVIOUR=SCROLL> teks berjalan, kemudian diulang lagi dari awal </MARQUEE> |
| DIRECTION=LEFT atau RIGHT | Menentukan arah berjalannya teks | <MARQUEE DIRECTION=RIGHT> teks berjalan ke kanan </MARQUEE> |
| SCROLLDELAY=n | Menentukan jumlah milidetik (n) antar tampilan | <MARQUEE SCROLLDELAY=15> teks berjalan dengan delay 15 mili detik </MARQUEE> |
Untuk lebih memahami tabel dia atas perhatikan contoh-contoh di bawah. Untuk mengaplikasikan ke blogspot: copy-kan script yang terdapat pada kotak warna kuning (kotak di atasnya) kemudian masuk ke layout, tambah elemen halaman, pilih HTML/JavaScript dan paste kode yang telah disalin.
Contoh : 1
Teks berjalan secara horisontal:
| <marquee bg="#ff00ff" > teks berjalan tanpa tag direction. </marquee> |
| <marquee behavior="alternate" bgcolor="red" direction="right"> teks berjalan dengan arah kiri-kanan. </marquee> |
|---|
Contoh 2:
Teks menggulung ke atas atau ke bawah. Berikut adalah script yang cukup berguna jika kita mau tampilkan berita atau mungkin suatu daftar yang dapat menggulung ke atas atau ke bawah. Cara
menggunakanya juga sama, copy kan script dalam kotak warna kuning dan paste pada elemen HTML Blog. yang mungkin perlu di edit lagi adalah teks, lebar tampilan, delay serta warna.
| <marquee style="color:#ff8756; scrolldelay="100" direction="up" width="250px" height="100px" bgcolor="#ffffcc">Teks menggulung ke atas.Tambahkan teks yang akan dibuat menggulung di sini. bila mau ubah warna coba di kasih sendiri </marquee> |
Untuk contoh berikut teks akan berhenti, jika pointer mouse diletakkan di atasnya sebaliknya akan mulai menggulung lagi jika pointer mouse digeser dari teks tersebut. Ubah warna teks dan font bila perlu.
| <marquee style="color:blue"; scrolldelay="150" width="250px" direction="down" bgcolor="#ffffcc" height="100px" onmouseover="this.stop()" onmouseout="this.start()">Tambahkan teks yang akan dibuat menggulung ke bawah di sini. Bila mau ubah warna coba di kasih sendiri.</marquee> |
Label:
Teks Bergerak
|
komentar (1)
1 komentar:
ada yang lain gak pak selain yang itu, misalnya kalo kena crusor teks nya berenti. makasi sebelumnya
Posting Komentar