Marquee adalah kode HTML yang berguna untuk membuat teks berjalan. Dengan memasang marquee ini, blog kita akan terlihat lebih hidup dan dapat menghemat ruangan pada blog kita.
Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.
Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.
Beberapa attributes yang sering digunakan dalam marquee yaitu:
1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :
Ada 4 arah gerakan yang bisa digunakan yaitu :
4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna. Baca disini
5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.
6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.
7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".
8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.
10. Loop: untuk mengatur jumlah pengulangan.
Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:
Contoh 1: Efek teks berjalan bolak-balik secara horizontal:
Kodenya :
<span style="color: black; font-family: arial; font-size: medium;"><marquee behavior="alternate" bgcolor="red" direction="right" height="20px" scrollamount="2" scrolldelay="10" width="450px">www.trydkill.com</marquee></span>
Contoh 2: Efek teks berjalan bolak-balik secara vertikal:
Kodenya:
<span style="color: red; font-family: verdana; font-size: medium;"><marquee behavior="alternate" bgcolor="purple" direction="up" height="100px" scrollamount="2" scrolldelay="10" width="450px"><center>www.trydkill.com</center></marquee></span>
Contoh 3: Efek teks berjalan kekanan secara kontinu
Kodenya:
Kodenya:
<font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">www.trydkill.com</marquee></font>
Contoh 5: Efek teks berjalan kekanan tiga kali
Kodenya:
<font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">www.trydkill.com</marquee></font>
Contoh 6: Efek Bounce
Kodenya:
<span style="color: orange; font-family: comic sans ms; font-size: medium;"><marquee behavior="alternate" bgcolor="black" direction="up" height="100px" scrollamount="2" scrolldelay="10" width="450px"><marquee behavior="alternate" direction="left" scrollamount="2" scrolldelay="10">www.trydkill.com</marquee></marquee></span>
Untuk membuat teks berhenti jika mouse menyentuh area marquee dan berjalan kembali jika mouse meninggalkan area marquee. Tambahkan kode onmouseover="this.stop()" dan onmouseout="this.start()"
Kodenya:
<font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue">www.trydkill.com</marquee></font>
Hasilnya seperti berikut:
Cara Memasang Marquee pada Blog:
trydkill
Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.
Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.
Beberapa attributes yang sering digunakan dalam marquee yaitu:
1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :
2. Direction : mengatur arah gerakan teks.
- Alternate : Teks bergerak bolak-balik
- Slide : Teks hanya bergerak sekali saja
- Scroll : Teks bergerak ke satu arah secara kontinu
Ada 4 arah gerakan yang bisa digunakan yaitu :
3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda
- Up : Teks bergerak keatas
- Down : Teks bergerak kebawah
- Left : Teks bergerak kekiri
- Right : Teks bergerak kekanan
4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain. Belum tau cara menghasilkan kode warna. Baca disini
5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.
6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.
7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".
8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.
10. Loop: untuk mengatur jumlah pengulangan.
Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:
Contoh 1: Efek teks berjalan bolak-balik secara horizontal:
Kodenya :
<span style="color: black; font-family: arial; font-size: medium;"><marquee behavior="alternate" bgcolor="red" direction="right" height="20px" scrollamount="2" scrolldelay="10" width="450px">www.trydkill.com</marquee></span>
Contoh 2: Efek teks berjalan bolak-balik secara vertikal:
Kodenya:
<span style="color: red; font-family: verdana; font-size: medium;"><marquee behavior="alternate" bgcolor="purple" direction="up" height="100px" scrollamount="2" scrolldelay="10" width="450px"><center>www.trydkill.com</center></marquee></span>
Contoh 3: Efek teks berjalan kekanan secara kontinu
Kodenya:
<span style="color: gold; font-family: times; font-size: medium;"><marquee behavior="scroll" bgcolor="black" direction="right" height="20px" scrollamount="3" scrolldelay="10" width="450px">www.trydkill.com</marquee></span>
Contoh 4: Efek teks berjalan kekiri sekali saja
Contoh 4: Efek teks berjalan kekiri sekali saja
Kodenya:
<font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">www.trydkill.com</marquee></font>
Contoh 5: Efek teks berjalan kekanan tiga kali
Kodenya:
<font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">www.trydkill.com</marquee></font>
Contoh 6: Efek Bounce
Kodenya:
<span style="color: orange; font-family: comic sans ms; font-size: medium;"><marquee behavior="alternate" bgcolor="black" direction="up" height="100px" scrollamount="2" scrolldelay="10" width="450px"><marquee behavior="alternate" direction="left" scrollamount="2" scrolldelay="10">www.trydkill.com</marquee></marquee></span>
Untuk membuat teks berhenti jika mouse menyentuh area marquee dan berjalan kembali jika mouse meninggalkan area marquee. Tambahkan kode onmouseover="this.stop()" dan onmouseout="this.start()"
Kodenya:
<font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue">www.trydkill.com</marquee></font>
Hasilnya seperti berikut:
Cara Memasang Marquee pada Blog:
- Log In Blog
- Pilih Rancangan
- Pilih Elemen Laman
- Tambah Gadget
- HTML/JavaScript
- Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
- Selesai
trydkill
0 komentar:
Posting Komentar