Teks Berjalan yang dalam bahasa html nya disebut
marquee ini, selain fungsinya untuk mempercantik
tampilan blog kita, ia juga sebagai pengundang per-
hatian mata para pengunjung blog kita, karena ada
sedikit perasaan beda dari biasanya, yang mana
pada umumnya teks itu tidak bergerak atau berjalan.
Kita langsung saja ke tutorial cara membuatnya.
Dari kanan ke kiri :
Kodenya :
<marquee>TEKS DI SINI</marquee>
Contohnya :
Dari kiri ke kanan :
Kodenya :
<marquee direction="right">TEKS DI SINI</marquee>
Contohnya :
Dari bawah ke atas :
Kodenya :
<marquee direction="up">TEKS DI SINI</marquee>
Contohnya :
Dari atas ke bawah :
Kodenya :
<marquee direction="down">TEKS DI SINI</marquee>
Contohnya :
Berhenti bila mouse di atasnya :
Kodenya :
<marquee behavior="alternate" onmouseout="this.start()" onmouseover="this.stop()">TEKS DI SINI</marquee>
Contohnya :
Bolak-balik/memantul :
Kodenya :
<marquee behavior="alternate">TEKS DI SINI</marquee>
Contohnya :
Naik ke arah kanan :
Kodenya :
<marquee direction="up" width="85%"><marquee direction="right">TEKS DI SINI</marquee></marquee>
Contohnya :
Naik-turun zig-zag :
Kodenya :
<marquee behavior="alternate" direction="up" width="85%"><marquee behavior="alternate" direction="right">TEKS DI SINI</marquee></marquee>
Contohnya :
Berhenti bila mouse di atasnya,
dan berbackground :
Kodenya :
<marquee bgcolor="#80ff00" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="85%px">TEKS DI SINI</marquee>
Contohnya :
KETERANGAN :
* scrollamount=
Untuk mengantur kecepatan,
semakin kecil angkanya maka
semakin lambat berjalannya.
* width= & height=
Untuk mengatur batas ruangnya.
* Left= & right=
Untuk mengatur kiri & kanannya.
* bgcolor=
Untuk mengatur warna dasarnya.
* Selain teks, bisa juga untuk
membuat gambar/image berjalan.
Kodenya :
<marquee align="center" behavior="alternate" direction="left" height="100" scrollamount="3" width="85%">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://s1128.photobucket.com/albums/m486/syamsudin1/?action=view&current=burung1.gif" target="_blank"><img src="http://i1128.photobucket.com/albums/m486/syamsudin1/burung1.gif" /></a></div>
</marquee>
Hasilnya :
2 comments:
mantap....
Posting Komentar