Tulisan Berjalan di Blog

Mungkin saat melihat blog teman- teman kadang menemui blog yang teks atau gambar banernya bisa bergerak-gerak. Dan ini menimbulkan pertanyaan di hati anda semua, “ Bagaimana yah cara membuatnya?

dari pada penasaran mari kita bongkar rahasia teks bergerak tersebut. Rahasianya yaitu “ Marque “.

Marquee merupakan kumpulan kode HTML yang jika diterjemahkan dalam bahasa web browser akan membentuk suatu animasi berupa teks atau image yang bergerak atau berjalan.

Karena pokok bahasannya adalah “marquee”, maka kode HTML-nya pun marquee, yakni <marquee> … </marquee>.

Untuk lebih memahami tentang marquee (teks bergerak atau berjalan), mari bersama-sama kita telusuri trik blogger dengan menggunakan kode HTML marquee tersebut.
Berikut beberapa contoh kode teks berjalan (marquee) :

<marquee>Contoh teks ini menggunakan marquee default</marquee>

hasilnya :

Contoh teks ini menggunakan marquee default

<marquee direction=”right”>Teks bergerak ke kanan</marquee>

hasilnya :
Teks bergerak ke kanan
Catatan : “direction” merupakan kode yang berfungsi untuk menentukan arah gerakan teks atau image. Atributnya adalah left, right, up, dan down.

<marquee direction=”up” height=”50″ width=”50%”>Teks berjalan ke atas yang dibatasi area tertentu</marquee>

Teks berjalan ke atas yang dibatasi area tertentu

Catatan : “height” dan “width” berfungsi untuk menentukan tinggi serta lebar area marquee yang digunakan oleh teks, atributnya berupa nilai angka atau prosen (%).

<marquee bgcolor=”#f2f5a9″ scrolldelay=”2000″ direction=”down” scrollmount=”2″ height=”50″ width=”75%”>Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula</marquee>

Teks di kiri berjalan ke bawah dgn waktu tunda 2 detik, berkecepatan tertentu yang dibatasi area tertentu pula

Catatan : “scrolldelay” berfungsi mengatur waktu tunda, atributnya adalah angka per-mili detik. Sedangkan “scrollmount” digunakan untuk mengatur kecepatan gerakan teks, atributnya berupa angka. Semakin besar angka, maka semakin cepat gerakannya.

<marquee bgcolor=”#cecef6″ scrollmount=”2″>Teks berkecepatan tertentu dengan menggunakan latar warna biru muda</marquee>

Teks berkecepatan tertentu dengan menggunakan latar warna biru muda

Catatan : “bgcolor” mempunyai fungsi memberikan warna latar teks, atributnya adalah kode warna.

<marquee bgcolor=”#f2f5a9″ loop=”4″>Teks 4x berjalan, kemudian hilang</marquee>

Teks 4x berjalan, kemudian hilang

<marquee bgcolor=”#cecef6″ loop=”4″ behavior=”slide”>Teks 4x berjalan, kemudian berhenti</marquee>

Teks 4x berjalan, kemudian berhenti

Catatan : “loop” mempunyai fungsi mengatur jumlah gerakan, atributnya adalah angka. Semakin besar nilainya, maka semakin banyak pula gerakannya. Biasanya kode loop diikuti dengan kode behavior=”slide”, agar teks tidak hilang.

<marquee hspace=”25″ width=”25%” bgcolor=yellow><p>Teks berjalan</p>dan berjarak horizontal</marquee>

Teks berjalan
dan berjarak horizontal

<marquee vspace=”25″ width=”25%” bgcolor=yellow><p>Teks berjalan</p>dan berjarak vertikal</marquee>

Teks berjalan
dan berjarak vertikal

Catatan : “hspace” berguna mengatur jarak marquee dengan teks atau tepi elemen secara horizontal, atributnya adalah angka. Sedangkan “vspace” berfungsi untuk mengatur jarak marquee dengan teks atau tepi elemen secara vertikal, atributnya angka juga. Semakin besar nilainya, maka semakin besar jaraknya.

<marquee behavior=”alternate”>Teks ini akan berjalan bolak-balik</marquee>

Teks ini akan berjalan bolak-balik

Catatan : “behavior” berfungsi untuk mengatur perilaku gerakan teks dgn atribut yang mengikutinya seperti scroll (gerakan default ke kiri), slide (bergerak sekali lalu berhenti), dan alternate (bolak-balik).

Nah, sekarang bagaimana jika anda ingin memasukkan jenis huruf (font-family) dan warna huruf (color). Kamu tinggal menambahkan kode <span> … </span> diantara kode marquee, singkat kodenya seperti di bawah ini.

<span style=”font-family:arial;color:#0000ff;”><marquee bgcolor=”#f2f5a9″ direction=”down” behavior=”alternate” scrollamount=”10″ height=”100″ width=”50&”>Teks arial warna biru</marquee></span>

Teks arial warna biru

Kalau anda ingin yang berjalan bukan teks, melainkan image maka tinggal mengganti teks yang berwarna merah dengan alamat penyimpanan file gambar anda.

<marquee><img src=”http://i647.photobucket.com/albums/uu191/ariamsi/powered-by.jpg”/></marquee>

Catatan : Kode warna merah merupakan teks yang dimasukkan dalam kode marquee.

Dan masih banyak lagi variasi kode yang dapat anda optimasi, sehingga sesuai dengan tipe dan karakteristik elemen di bloganda . Point pentingnya adalah jangan tidak pernah mencoba, karena anda nanti  tidak akan pernah pula tahu arti dan maknanya.

Selamat mencoba ,.....
Copy http://suhendi.com