Membuat text bergerak atau Berjalan


imageText bergerak atau berjalan seperti yang terlihat pada banyak blog yang bisa dibilang cukup memberi keindahan pada blog.. baik itu di pasang sebagai Atribut Widget atau di masukkan kedalam sebuah postingan, text ini bisa berjalan ke kiri, kekanan, keatas, atau kebawah ya tergantung oleh minat kita maunya yang bagaimana. Nah sekarang saya beri tau bagaimana cara membuatnya...Cekidot :



1. Bergerak dari kanan ke kiri (default).

<marquee> Text berjalan dari kanan ke kiri </marquee>
Hasilnya:

Text berjalan dari kanan ke kiri


2. Membuat teks berjalan dari kiri ke kanan (direction)

<marquee behavior="scroll" direction="right" height="50" width="auto">Text berjalan dari kiri ke kanan</marquee>
Hasilnya:

Text berjalan dari kiri ke kanan

3. Membuat teks bergerak dengan mengatur kecepatannya (scrollamount)

<marquee behavior="scroll" direction="left" scrollamount="5">Teks bergerak lambat</marquee>
Hasilnya:

Teks bergerak lambat:

<marquee behavior="scroll" direction="left" height="100" scrollamount="30" width="auto">Teks bergerak lebih cepat</marquee>
Hasilnya:

Teks bergerak lebih cepat


4. Membuat teks bergerak bolak balik / memantul saat tiba di tepi kiri atau kanan

<marquee behavior="alternate">Teks berjalan bolak balik</marquee>
Hasilnya:

Teks berjalan bolak balik


5. Membuat teks berjalan dengan background biru

<marquee bgcolor="blue" height="50" width="auto">
Teks berjalan dengan background biru
</marquee>
Hasilnya:


Teks berjalan dengan background biru



6. Membuat teks bergerak dari bawah ke atas

<marquee behavior="scroll" direction="up" height="200" width="auto">
Teks bergerak dari bawah ke atas
</marquee>
Hasilnya:


Teks bergerak dari bawah ke atas


7. Membuat teks bergerak dari bawah ke atas (di dalam kotak teks)

<div style="border: 1px solid rgb(202, 61, 217); height: 180px; overflow: auto; padding: 5px;">
<b>
<marquee behavior="scroll" scrollamount="3" direction="up"></br>
<a href="http://artikelkomputerku.blogspot.com/">Tutorial Blog</a></br>
<a href="http://www.komputerseo.com/">Belajar SEO</a></br>
<a href="http://mycomputerdummies.blogspot.com/">Tips dan trik Dummies</a></br>
<a href="http://dummy-ku.blogspot.com/">Miztiz</a></br>
</marquee>
</b>
</div>
Hasilnya:



8.Membuat teks bergerak dari bawah ke atas, memantul dan berhenti jika penunjuk mouse berada di atas teks area.
Tambahkan kode: onmouseout="this.start()" onmouseover="this.stop()

<marquee align="center" behavior="alternate" direction="up" height="300" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100">
Teks 1
Teks 2
Teks 3
</marquee>
Hasilnya:


Teks 1
Teks 2
Teks 3







Previous
Next Post »