Tahukah Anda?
Pencarian di blog ini menggunakan Mesin Pencari Buatan Indonesia!
Mari kita dukung!  Kunjungi dan gunakan Penjejak.com ! »

Jumat, 19 Oktober 2012

Membuat Tampilan Teks dan Gambar Berjalan dengan Marquee

Anda sering melihat tampilan teks atau gambar yang berjalan, berputar, atau bergeser-geser menampilkan cuplikan teks atau gambar tertentu di halaman web? Teknik ini bisa dilakukan dengan mudah menggunakan kode HTML biasa, yaitu menggunakan tag <marquee>. Untuk meningkatkan efek tampilan, marquee juga bisa disisipi kode CSS dan JavaScript. Ingin mencobanya di website atau blog Anda?

Tag marquee sebenarnya bukan tag standar HTML, sehingga ada kemungkinan tidak berfungsi dengan baik di browser tertentu. Namun jangan terlalu khawatir, browser-browser populer bisa menjalankannya dengan baik.

tag marquee

Prinsipnya, kode dasar marquee (tanpa pengaturan tambahan) yang perlu Anda buat adalah sebagai berikut:

<marquee>Ini baris teks, kode link, atau kode gambar yang akan ditampilkan</marquee>

Penjelasan:
  • Awali dengan tag pembuka <marquee> dan akhiri dengan tag penutup </marquee>.
  • Tempatkan teks, kode HTML link, atau kode HTML gambar di antara tag pembuka dan penutup marquee.

Berikut contoh marquee sederhana berupa teks tanpa pengaturan apapun.

Kode:
<marquee>Contoh teks berjalan</marquee>

Tampilan:
Contoh teks berjalan

Berikut contoh marquee sederhana berupa gambar. Anda cukup mengganti teks dengan kode HTML untuk penyisipan gambar.

Kode:
<marquee><img src="http://4.bp.blogspot.com/-VIJVqs8esn8/UIA3preJVeI/AAAAAAAAAiQ/dIdJRTFdt2I/s1600/kode-html.png" /></marquee>

Tampilan:


Berikut contoh marquee sederhana berupa teks link. Anda cukup memasang kode HTML untuk penyisipan link.

Kode:
<marquee><a href="http://www.komputeran.com">Komputeran</a></marquee>

Tampilan:
Komputeran

Selain contoh kode marquee dasar di atas, Anda dapat mengatur tampilan marquee sesuai dengan keinginan Anda. Caranya dengan menambahkan atribut tertentu di dalam tag marquee. Berikut ini susunan kodenya:

<marquee behavior="tindakan" direction="arah" scrollamount="angka">Ini baris teks, kode link, atau kode gambar yang akan ditampilkan</marquee>

Penjelasan:
  • Gunakan behavior untuk melakukan tindakan tertentu, nilainya yaitu: scroll (terus berputar), slide (berputar sekali), alternate (bolak-balik)
  • Gunakan direction untuk menentukan arah pergerakannya, nilainya yaitu: left (ke kiri), right (ke kanan), up (ke atas), down (ke bawah).
  • Gunakan scrollamount untuk menetapkan kecepatannya, nilainya yaitu: angka, dalam hal ini angka 1 paling lambat. 
Berikut contoh penggunaan marquee dengan pengaturan tindakan, arah, dan kecepatannya:

Kode:
<marquee behavior="scroll" direction="right" scrollamount="1">Teks terus berputar ke kanan dengan kecepatan lambat</marquee>

Tampilan:
Teks terus berputar ke kanan dengan kecepatan lambat

Kode:
<marquee behavior="alternate" scrollamount="5">Teks bolak-balik ke kiri dan ke kanan dengan lebih cepat</marquee>

Tampilan:
Teks bolak-balik ke kiri dan ke kanan dengan lebih cepat.

Kode:
<marquee behavior="slide" direction="up" scrollamount="1">Teks ini bergerak perlahan sampai ke atas, lalu berhenti.</marquee>

Tampilan:
Teks ini bergerak perlahan sampai ke atas, lalu berhenti.

Selain menggunakan pengaturan via atribut behavior, direction, dan scrollamount, Anda juga bisa mencoba menambahkan atribut align (perataan margin), bgcolor (warna latar), width (lebar marquee), loop (membatasi jumlah perulangan), dan scrolldelay (mengatur waktu jeda). Selain itu, tag marquee juga bisa Anda sisipi style (CSS) untuk mempercantik tampilan. Bahkan, Anda bisa menambahkan kode JavaScript di dalamnya.

Contoh marquee dengan atribut lainnya:

Kode:
<marquee behavior="alternate" scrollamount="5" bgcolor="orange" width="50px">Teks berlatar oranye dengan lebar 50 piksel.</marquee>

Tampilan:
Teks berlatar oranye dengan lebar 50 piksel.

Contoh marquee dengan kode CSS:

Kode:
<marquee behavior="alternate" scrollamount="5" style="border:1px solid #eee;font-size:16px;color:#6699cc">Teks warna biru dan diberi garis batas abu-abu.</marquee>

Tampilan:
Teks warna biru dan diberi garis batas abu-abu.

Contoh marquee dengan kode JavaScript:

Kode:
<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Tahan teks ini dengan mouse untuk menghentikannya.</marquee>

Tampilan:
Tahan teks ini dengan mouse untuk menghentikannya.

Anda bisa mengkombinasikan berbagai teknik di atas untuk mendapatkan hasil marquee yang lebih menawan. Selamat mencoba dan berkreasi!


7 komentar:

  1. ngomong2 tag ini kan sudah deprecated ya? atau barangkali di HTML5 dihidupkan lagi? menurut abang penulis gimana?

    BalasHapus
  2. Keren artikelnya gan, apakah akan memberatkan blog ?
    salam kenal

    BalasHapus
  3. wow super keren..bukan hanya teks yang dimodif hingga berjalan,,gambar juga bisa..terimakasih gan atas infonya..
    akan saya coba

    BalasHapus
  4. kedua kalinya saya mengunjungi artikel agan ini,,setelah kemarin saya mencoba alhasil berhasil gan..
    terimakasih atas panduan agan ini..

    oh iya gan mohon muat yang lain..misalnya membuat teks/kalimat berkedip-kedip kode HTMLnya apa gan.?
    thanks

    BalasHapus
  5. kedua kalinya saya mengunjungi artikel agan ini,,setelah kemarin saya mencoba alhasil berhasil gan..
    terimakasih atas panduan agan ini..

    oh iya gan mohon muat yang lain..misalnya membuat teks/kalimat berkedip-kedip kode HTMLnya apa gan.?
    thanks

    BalasHapus
  6. Ngomong-ngomong Scricpt di atas tidak berlaku pada Internet Explorer coba aja buka blog ini via IE.. gak ada tampilan berjalan..

    dan sampai skrg saya masih cari solusi biar bisa berfungsi di IE.. jika ada yang bisa membantu sebelumnya terimaksih..

    BalasHapus