Membuat Efek Animasi Text pada HTML | Tips and Trik Blog

Mungkin anda sering melihat animasi-animasi unik yang ada pada blog-blog tiap orang yang pernah anda jumpai, seperti

TEXT BERJALAN TIADA HENTI SEPERTI INIKAH YANG ANDA MAU????, TEXT BERKEDLIP-KELIP,

dan sebagainya.
Berikut ini adalah kode-kode untuk efek text:

==================================================

<blink>TEXT</blink>

TEXT

kode untuk perilaku text berkelip-kelip

==================================================

Helllllooo
==================================================
<marquee>TEXT</marquee>
TEXT
Kode untuk perilaku gerakan dari kanan ke kiri
==================================================
Helllllooo
==================================================
<marquee direction="right">TEXT</marquee>
TEXT
Kode untuk perilaku gerakan dari kiri ke kanan
==================================================
Helllllooo
==================================================
<marquee behavior="alternate">TEXT</marquee>
TEXT
Kode untuk perilaku gerakan berjalan ke kiri dan ke kanan
==================================================
Helllllooo
==================================================
<marquee direction="up">TEXT</marquee>
TEXT
Kode untuk perilaku gerakan berjalan ke atas
==================================================
Helllllooo
==================================================
<marquee direction="down">TEXT</marquee>
TEXT
Kode untuk perilaku gerakan berjalan ke bawah
==================================================
Helllllooo
==================================================
<marquee direction="up" behavior="alternate">TEXT</marquee>
TEXT
Kode untuk perilaku gerakan berjalan ke atas dan ke bawah
==================================================
Helllllooo
==================================================
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</marquee></marquee>
TEXT
Kode untuk perilaku gerakan terbang zigzag
==================================================
Helllllooo
==================================================
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</marquee></marquee>
TEXT
Kode untuk perilaku gerakan berjalan zigzag ke atas dan ke bawah
==================================================
Helllllooo
==================================================
<marquee behavior="alternate" width="10%">>></marquee>TEXT<marquee behavior="alternate" width="10%"><<</marquee>
>>TEXT<<
Kode perilaku untuk menampilkan tanda panah ke teks
==================================================
Helllllooo
==================================================
<font ><marquee direction="left" style="background:BLUE">TEXT</marquee></font>
TEXT
Kode untuk perilaku gerakan berjalan dari kanan ke kiri dengan latar belakang warna, anda bisa merubahnya dengan kode warna lain
==================================================
Helllllooo
==================================================
<marquee style="border:BLUE 2px SOLID">TEXT</marquee>
TEXT
Kode untuk perilaku gerakan berjalan dari kanan ke kiri dengan dikelilingi garis tepi (border)
==================================================
Helllllooo
==================================================
<marquee behavior="alternate"><marquee width="150">TEXT</marquee></marquee>
TEXT
Kode untuk perilaku gerakan berjalan dengan hanya menampilkan bagian depan textnya saja atau hidden marquee
==================================================
Helllllooo
==================================================
<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>TEXT<br>TEXT</center></marquee>
TEXT
TEXT
Kode untuk perilaku gerakan berjalan seperti gelombang ombak ke atas dan ke bawah
==================================================



Keterangan :
+ Ganti tulisan Text dengan tulisan yang akan di tampilkan sesuai keinginan.

Cara membuatnya :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy Paste Script yang ada tinggal anda edit saja
4. Klik Simpan dan selesai

Ada variasi lain dari marquee lagi, yaitu ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee tsb. Kodenya di bawah ini :

========================================================

<table border="1" width="341" cellpadding="1" height="260">

<tr>

<td align="right">

<marquee direction="up" onmouseover="this.stop()" width="332" onmouseout="this.start()" scrollamount="2" height="250">

<ul>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

<li><a href='URL ANDA' target="_blank">KEREN KAN??</a></li>

</ul>

</marquee>

</td>

</tr>

</table>

=========================================================

Hasilnya dapat anda lihat di bawah ini dan coba arahkan mouse ke tulisan :

KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN?? KEREN KAN??

GOODLUCK