S-SKYSER Banner Banner
Posted by : Setyawan Umar 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:
·         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="colorwhite; font-familygeorgia;"><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.....

Bila ada yang kurang dimengerti bisa langsung ditanyakan. Oiya, jangan lupa isi buku tamunya ya....

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...

 
Top