cara membuat teks berjalan di blog
Bagaimana cara membuat teks atau tulisan berjalan di blog (marquee)? kenapa teks atau tulisan berjalan di blog biasa juga disebut dengan marquee teks. Alasannya karena teks berjalan atau tulisan bergerak tersebut menggunakan tag <marquee>. kode marquee tidak hanya bisa diaplikasikan pada teks saja, tapi bisa juga diaplikasikan pada file lain seperti video, gambar, animasi dan lain-lain.

Nah untuk membuat teks atau tulisan berjalan (bisa juga gambar yang berjalan), caranya sungguh sangat mudah yaitu dengan menggunakan kode seperti dibawah ini:

<marquee>TEKS/TULISAN/GAMBAR YANG BERGERAK</marquee>
Kode yang ada diatas akan menampilkan teks berjalan seperti di bawah ini:

TEKS/TULISAN/GAMBAR YANG BERGERAK
Jadi pada kondisi default, teks akan bergerak dari arah kanan ke kiri.

tapi jika anda merasa kurang puas dengan efek default dari kode marquee, maka anda bisa menambahkan kode-kode di bawah ini untuk memperindah tampilan teks berjalan pada blog.

1. kode scrolldelay
kode scrolldelay berfungsi untuk mengatur kecepatan teks berjalan. contoh penerapan kode scrolldelay pada teks/tulisan berjalan adalah sebagai berikut ini

<marquee scrolldelay="500">TEKS/TULISAN/GAMBAR YANG BERGERAK</marquee>

hasilnya akan seperti di bawah ini:

TEKS/TULISAN/GAMBAR YANG BERGERAK

catatan: semakin besar angka pada scrolldelay maka akan semakin lambat kecepatan teks/tulisan berjalan pada blog, begitupun seballiknya semakin kecil angkanya maka kecepatannya akan semakin cepat..

2. kode loop
kode loop berfungsi untuk menampilkan teks berjalan sesuai keinginan anda.contoh penerapannya:

<marquee loop="5">MARQUEE BERULANG 5 KALI DAN AKAN MENGHILANG</marquee>

jadi dengan menambahkan loop="5" maka teks berjalan akan menghilang setelah 5 kali. hasilnya seperti di bawah ini

MARQUEE BERULANG 5 KALI DAN AKAN MENGHILANG

3. kode width
selanjutnya anda juga dapat menambahkan kode width pada teks berjalan, satuannya bisa berupa % ataupun px
contohnya:
<marquee width="300px">MARQUEE DENGAN LEBAR 300PX</marquee>

maka hasilnya seperti di bawah ini

MARQUEE DENGAN LEBAR 300PX

4. kode bgcolor
kode bgcolor berfungsi untuk mengubah background dari teks berjalan yang anda pasang. contohnya:

<marquee bgcolor="green">TEKS BERJALAN BACKGROUND HIJAU</marquee>

maka hasilnya akan terlihat seperti dibawah ini

TEKS BERJALAN BACKGROUND HIJAU

5. kode scrollamount
kode scrollamount mempunyai fungsi yang hampir sama dengan kode scrolldelay diatas. hanya saja hasil yang didapatkan dengan menggunakan kode  scrollamount akan terlihatlebih halus.

contoh:
<marquee scrollamount="5">MARQUEE DENGAN KECEPATAN 5</marquee>

Makan hasilnya akan terlihat seperti di bawah ini

MARQUEE DENGAN KECEPATAN 5

catatan: penggunaannya berbeda dengan kode scrolldelay, jadi pada scrollamount semakin besar angkanya maka kecepatannya akan semakin besar pula.

berikut perbandingan antara kode scrolldelay dan kode scrollamount dengan angka yang sama yaitu 50

<marquee scrolldelay="50">MARQUEE SCROLLDELAY DENGAN KECEPATAN 10</marquee>
 <marquee scrollamount="50">MARQUEE SCROLLAMOUNT DENGAN KECEPATAN 10</marquee>

hasilnya

MARQUEE SCROLLDELAY DENGAN KECEPATAN 10

MARQUEE SCROLLAMOUNT DENGAN KECEPATAN 10

6.kode direction
kode direction berfungsi untuk mengatur arah dari teks berjalan karena pada kondisi default teks berjalan akan bergerak dari kiri ke kanan. jadi ada 4 variabel yang bisa anda tambahkan yaitu left right up dan down.
contohnya:

 <marquee direction="right">MARQUEE BERGERAK KE KANAN</marquee>

hasilnya seperti di bawah ini

MARQUEE BERGERAK KE KANAN

7. kode behavior
untuk kode behavior ada 3 variabel yang bisa anda tambahka, yaitu scroll, slide dan alternate.
untuk perbedaannya silahkan lihat contoh di bawah ini

scroll
<marquee behavior="scroll">MARQUEE EFEK SCROLL</marquee>
hasilnya
MARQUEE EFEK ALTERNATE

slide
<marquee behavior="slide">MARQUEE EFEK SLIDE</marquee>
hasilnya
MARQUEE EFEK ALTERNATE

alternate
<marquee behavior="alternate">MARQUEE EFEK ALTERNATE</marquee>
hasilnya
MARQUEE EFEK ALTERNATE

selain itu efek marquee juga bisa di aplkasikan pada gambar. contohnya seperti dibawah ini;
kodenya seperti ini : <marquee><img src="url gambar" /></marquee>

hasilnya:




semoga bermanfaat

1 komentar:

  1. Wow, marvelous blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your site
    is great, let alone the content!

    BalasHapus