Posted by : Unknown
6 April 2013
Salam semua. Sudah lama sekali SE tidak
posting tentang Blog. Terlalu sering
membuat Cover FB soalnya,
hehehehe... Sambil mencari-cari inspirasi baru untuk Cover FB saya akan memberikan postingan mengenai Blog saja. Kali ini postingan saya
mengenai cara membuat Marque atau
bisa dibilang teks berjalan. Marquee merupakan suatu program HTML untuk membuat teks atau tulisan agar dapat bergerak
atau berjalan. Selain dapat menghemat tempat pada halaman blog, program
marquee ini juga terlihat menarik karena sifatnya yang dinamis. Untuk contohnya
bisa dilihat di setiap postingan saya sebelum ini, biasanya ada di bagian
abawah postingan sebelum kotak komentar.
Okelah, sudah pada penasaran-kan
pengen tahu caranya. Untuk pembuatannya cukup mudah kok, cuman menggunakan tag
<marquee>...</marquee>. Untuk atribut dan nilai (value) bisa
dilihat dibawah ini:
Berikut ini beberapa contoh dari marquee:
# Warrna Biru adalah atribut, sedangkan warna Hijau adalah value.
· Contoh marquee dari gerakan :
<marquee align="center" direction="left" height="20" scrollamount="3" width="100%">INI ADALAH CONTOH MARQUEE DENGAN DIRECTION LEFT</marquee>
· Contoh marquee dari perilaku gerakan:
<marquee align="center" behavior="alternate" direction="left" height="20" scrollamount="3" width="100%">INI ADALAH CONTOH MARQUEE DARI PERILAKU GERAKAN</marquee>
· Contoh marquee dengan variasi huruf dan warna latar belakang (background):
<div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="blue" scrollamount="3" width="100%">MARQUEE DENGAN VARIASI HURUF DAN WARNA LATAR BELAKANG</marquee></b></span></div>
Berikut ini adalah variasi lain dari marquee, yaitu teks akan berhenti ketika cursor sedang berada di area marquee dan akan kembali bergerak ketika cursor meninggalkan area marquee.
· Contoh, silahkan arahkan cursor sobat ke area marquee di bawah ini:
<marquee align="center" direction="up" height="90" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">ARAHKAN CURSOR SOBAT KE SINI</marquee>
· Contoh marquee yang di dalamnya terdapat link:
Ini sebenarnya saya juga baru tahu, hehehe, sama seperti di atas tapi marquee kali ini bisa kita selipkan link.
<marquee align="center" direction="up" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
<a href="http://setyawan-evolution.blogspot.com/search/label/Blog" target="_blank">Blog</a>
<a href="http://setyawan-evolution.blogspot.com/search/label/Design" target="_blank">Design</a>
<a href="http://setyawan-evolution.blogspot.com/search/label/Anime" target="_blank">Anime</a>
<a href="http://setyawan-evolution.blogspot.com/search/label/SKI" target="_blank">SKI</a></marquee>
# Sobat tinggal mengganti alamat url di atas (warna merah) dengan alamat url yang sobat inginkan. Utnuk tulisan berwarna merah di samping url bisa sobat ganti dengan kata-kata yang ingin sobat tampilkan.
Bagaimana sobat, mudah-kan cara membuatnya. Contoh-contoh diatas bisa sobat kembangkan sendiri sesuai imajinasi sobat sendiri. Semoga saja artikel ini bisa bermanfaat bagi sobat sekalian. Arigatou.....
· bgcolor : mengatur warna latar belakang (background) teks.
· direction : mengatur arah gerakan teks. Value: left, right, up, down.
· behavior : mengatur perilaku gerakan teks. Value: scroll, slide, alternate.
· scroll : teks bergerak berputar.
· slide : teks bergerak sekali lalu berhenti.
· alternate : teks bergerak ke kiri dan ke kanan lalu kembali lagi.
· title : mengatur pesan yang akan muncul saat maouse berada di atas teks.
· scrollamount : mengatur kecepatan gerakan dalam pixel (px), semakin besar angka semakin cepat geraknya.
· scrolldelay : mengatur waktu tunda gerakan dalam mili detik.
· width : mengatur lebar blog teks dalam pixel (px) atau persen (%).
· height : mengatur tingghi area teks.
Berikut ini beberapa contoh dari marquee:
# Warrna Biru adalah atribut, sedangkan warna Hijau adalah value.
· Contoh marquee dari gerakan :
<marquee align="center" direction="left" height="20" scrollamount="3" width="100%">INI ADALAH CONTOH MARQUEE DENGAN DIRECTION LEFT</marquee>
· Contoh marquee dari perilaku gerakan:
<marquee align="center" behavior="alternate" direction="left" height="20" scrollamount="3" width="100%">INI ADALAH CONTOH MARQUEE DARI PERILAKU GERAKAN</marquee>
· Contoh marquee dengan variasi huruf dan warna latar belakang (background):
<div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="blue" scrollamount="3" width="100%">MARQUEE DENGAN VARIASI HURUF DAN WARNA LATAR BELAKANG</marquee></b></span></div>
Berikut ini adalah variasi lain dari marquee, yaitu teks akan berhenti ketika cursor sedang berada di area marquee dan akan kembali bergerak ketika cursor meninggalkan area marquee.
· Contoh, silahkan arahkan cursor sobat ke area marquee di bawah ini:
<marquee align="center" direction="up" height="90" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">ARAHKAN CURSOR SOBAT KE SINI</marquee>
· Contoh marquee yang di dalamnya terdapat link:
Ini sebenarnya saya juga baru tahu, hehehe, sama seperti di atas tapi marquee kali ini bisa kita selipkan link.
<marquee align="center" direction="up" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
<a href="http://setyawan-evolution.blogspot.com/search/label/Blog" target="_blank">Blog</a>
<a href="http://setyawan-evolution.blogspot.com/search/label/Design" target="_blank">Design</a>
<a href="http://setyawan-evolution.blogspot.com/search/label/Anime" target="_blank">Anime</a>
<a href="http://setyawan-evolution.blogspot.com/search/label/SKI" target="_blank">SKI</a></marquee>
# Sobat tinggal mengganti alamat url di atas (warna merah) dengan alamat url yang sobat inginkan. Utnuk tulisan berwarna merah di samping url bisa sobat ganti dengan kata-kata yang ingin sobat tampilkan.
Bagaimana sobat, mudah-kan cara membuatnya. Contoh-contoh diatas bisa sobat kembangkan sendiri sesuai imajinasi sobat sendiri. Semoga saja artikel ini bisa bermanfaat bagi sobat sekalian. Arigatou.....
- Back to Home>
- Blog , Tips Blog >
- Cara Membuat Teks Berjalan (Marquee)
Langganan:
Posting Komentar (Atom)
2 komentar
Marquee sudah tidak digunakan lagi dalam HTML5, sehingga menyebabkan ketidakvalidan jika dicek menggunakan tool validator w3. :)
Hahaha, maaf sob... Itu buatnya saat saya tidak tahu... Masalah mau tidaknya menerapkan Marquee itu tergantung pribadi masing-masing.
Komentarlah dengan baik dan sopan, serta berikan komentar yang dapat membangun blog ini menjadi lebih baik. Arigatou Gozaimasu...