Selasa, 06 Juli 2010

Cara Membuat Marquee Text/Teks Berjalan

Marquee text merupakan teks yang dapat berjalan, Marquee dapat kita tempatkan di mana saja di halaman web/blog kita, sebenarnya teks yang dapat berjalan sendiri ini saya temukan saat sedang menggunakan Ms. FrontPage 2003, saya menyarankan anda untuk sering menggunakan Ms. FrontPage 2003, karena hal ini akan membantu anda untuk belajar kode-kode HTML dan kode CSS. Sayapun dapat mempelajari kode HTML dan CSS berkat sering menggunakan Ms. FrontPage 2003 (kok malah curhat?).

Baiklah sebelum anda membuat Marquee, coba lihat contoh dibawah ini! Contoh yang saya berikan tersebut merupakan teks marquue yang paling sederhana. 
  marquee

Sebenarnya teks diatas dapat dimodifikasi sesuai selera anda, mari kita akan bahas bersama-sama. . .



BAB I: Marquee dasar
ini kode untuk membuat marquee


<marquee> isikan teks anda </marquee>

Jika anda menuliskan kode diatas maka hasilnya akan
menjadi

  isikan teks anda

Jika sudah menjadi seperti itu, maka bab pertama telah selesai.

BAB II: Modifikasi Marquee
Anda ingin memodifikasinya menjadi seperti apa? Ingin menambahkan background, link, kecepatannya, atau arah geraknya? Jika ingin semuanya simak baik-baik tutorial dibawah ini:

1. Marquee Dengan Link
Jika anda ingin menambahkan link pada teks berjalan milik anda caranya sangat mudah, penulisannya pun sama dengan saat menuliskan link-link pada teks biasa. Misalkan penulisan link pada teks biasa seperti ini:


<a href="http://1stips.blogspot.com.com">Tips terbaru</a>

Hasil:

Maka kita hanya menambahkan kode

<marquee></marquee>
pada sebelum dan sesudah teks tersebut, menjadi:

<marquee><a href="http://1stips.blogspot.com">Tips mudah</a></marquee>

Hasil:

Atau jika teks tersebut diklik akan membuka browser baru maka tambahkan kode target=”_blank”, kodenya menjadi:

<marquee><a target="_blank"
href="http://1stips.blogspot.com">Tips mudah</a></marquee>

Hasil: (Coba klik tulisan berjalan ini, apa perbedaannya dengan yang sebelumnya)


2. Mengedit Font/Huruf
Pada tahap ini, anda akan belajar cara mengedit jenis huruf, ukurannya, warna, style dan kecepatannya. Pada Tahap ini, anda akan membutuhkan kode:

Face=”” ----Digunakan untuk mengganti huruf
Size=”” ----Sama seperti namanya, digunakan untuk mengganti ukuran huruf
Color=”” ----Untuk mengganti warna font
Scrollamount=”” ----Jika anda ingin mengganti kecepatannya, maka kode ini perlu digunakan

Setelah mengetahui kode diatas, apakah anda sudah dapat memodifikasinya sendiri? Jika masih belum simak kode dibawah ini baik-baik, saya akan menggabungkan semua kode diatas.


<marquee scrollamount="2">

<font color="#00FFFF" face="Arial"
size="2"><u><i><b>Blogger</b></i></u></font>

</marquee>

Pada kode diatas tidak saya tambahkan link. 
Hasil:



Keterangan:
·    Coba carilah kata scrollamount=”2”, jika anda ganti angkanya menjadi 3 atau 6 maka teksnya akan lebih cepat.
·    Ada banyak teks yang menghimpit kata Blogger (<u><i><b>Blogger</b></i></u>), ini merupakan kode untuk memberikan garis bawah/underline, membuat teks menjadi miring/italic dan menjadi tebal/blod.
·    Kalo’ kode yang berwarna merah adalah kode format pada kata Blogger. Anda dapat mengganti warna, jenis huruf, dan ukurannya sendiri.

Jika ingin menambahkan link, tinggal tambahkah kode untuk link, yang akan menjadi:


<marquee scrollamount="10">

<a target="_blank" href="http://www.blogger.com">

<font color="#00FFFF" face="Arial" size="2"><b><i><u>Blogger</u></i></b></font>

</a>

</marquee>

Hasil (coba klik teks tersebut):


Keterangan:
·    Kode yang bewarna hitam adalah kode marquee
·    Kode yang bewarna biru adalah kode untuk link
·    Kode yang bewarna merah adalah kode font (ukuran, warna, dll)

3. Memberikan Warna Background/Warna Latar
Perhatikan kode dibawah ini:

<marquee bgcolor="#00FF00">Blogger</marquee>

Hasil:

Blogger

Teks yang biru dapat anda ganti dengan kode warna lainnya.

4. Mengganti Arah Pergerakan Marquee
Text
Untuk mengganti arah, akan digunakan kode dibawah ini:

<marquee direction="down" height="127" width="93" bgcolor="#00FF00">Blogger</marquee>

Hasil:
Blogger

·    Kata down dapat anda ganti dengan up, right, dan left. Ini merupakan arah gerak teks marquee.
·    Angka pada height (127) bisa diganti dengan angka lainnya, ini merupakan tinggi marquee
·    Angka pada width (93) bisa diganti dengan angka lainnya, ini merupakan lebar marquee

Setelah anda selesai, coba praktekkan tutorial diatas

Semoga kode-kode marquee text diatas dapat anda maksimalkan, mudah-mudahan tutorial ini bermanfaat bagi pembacanya .

2 komentar: