Membuat Text/Image Berjalan

Teks atau gambar berjalan banyak digunakan oleh para blogger karena disamping dapat menghemat tempat juga menarik untuk dilihat. Program yang demikian dikenal dengan nama Marquee.
Program marquee selalu diawali dan diakhiri dengan kata marquee yang kodenya seperti ini :<marquee>...</marquee>.
Diantara kedua kode tersebut,dapat kita tambahkan beberapa kode lainnya, agar penampilannya lebih menarik, misalnya :

1. Bgcolor="warna" : untuk mengatur latar belakang teks.
2. Direction="left/right/up/down" : untuk mengatur arah gerakan dari teks.
3. Behavior="scroll/slide/alternate" : untuk mengatur perilaku gerakan.
Scroll = teks bergerak sambil berputar.
Slide = teks bergerak sekali lalu berhenti.
Alternate = teks bergerak bolak-balik kekiri dan kekanan.
4. Title="judul" : title akan muncul saat mouse diarahkan ke tulisan.
5. Scrollmount="angka" : untuk mengatur kecepatan dalam pixel, makin besar angkanya makin cepat gerakannya.
6. Scrolldellay="angka" = Untuk mengatur waktu tunda gerakan dalam mili detik.
7. Width="lebar" = Mengatur lebar blok teks dalam pixel atau persen.



Untuk lebih jelasnya perhatikan contoh dibawah ini :

Efek marquee yang bergerak dari kiri kekanan :


<marquee align="center" direction="left" height="100" scrollamount="2" width="75%">
Selamat Datang di Gamer'z Blogging Tutorial
</marquee>kata left bisa anda ganti dengan right, up atau down sesuai dengan keinginan anda.


Untuk Melihat Efeknya Kami Sarankan anda ke http://www.gamerz-maniac.blogspot.com/

Efek marquee dengan perilaku gerakan :

<marquee align="center" direction="right" height="100" scrollamount="3" width="100%" behavior="alternate">
Selamat Datang di EPG Studio
</marquee>


Efek marquee dengan warna pada latar belakang :


<div align="left"><font face="georgia" color="yellow"><b><marquee bgcolor="blue" width="100%" scrollamount="3" behavior="alternate">
Selamat Datang di EPG Studio
</marquee></b></font></div>


Setelah anda memahami kode-kode diatas, sekarang anda dapat mengganti huruf dengan gambar/image.

Contoh :
<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-010.jpg" target="_blank"><img width="150"src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-010.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-011.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-011.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-012.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-012.jpg" border="0" alt="Photobucket"></a>
<a href="http://s708.photobucket.com/albums/ww86/andiskapati/?action=view&current=uvs060101-015.jpg" target="_blank"><img width="150" src="http://i708.photobucket.com/albums/ww86/andiskapati/uvs060101-015.jpg" border="0" alt="Photobucket"></a>
</marquee>

kode-kode diatas terlihat seperti ini


Lihatlah pada http://www.gamerz-maniac.blogspot.com/


Perhatikan sederetan banner yang dipasang pada EPG Studio. Coba arahkan mouse pada gambar yang sedang berjalan.






Untuk membuat kode marquee seperti contoh diatas ( image/tulisan akan berhenti ketika mouse diarahkan diatasnya. Anda hanya perlu menambah kode ini onmouseover="this.stop()" dan kode onmouseout="this.start()"

Perhatikan contoh dibawah ini (kode dari banner di atas).


<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200" align="center">

<script src="epg-studio.blogspot.com"></script> <img border="0" width="220" src="http://1.bp.blogspot.com/_1j80TgNqd_8/SaESR56aNhI/AAAAAAAAAnY/3YSBhu-aHLU/S220/LOGO+EPG+1.jpg" height="40" />
<br/>
<a href="http://smpn1cbr.blogspot.com/"><img border="0" width="220" alt="Photobucket" src="http://i662.photobucket.com/albums/uu349/m4ns/smpn-1.gif" height="60" /></a><a target="_blank" href="http://gustihana.blogspot.com/">
<br/>
<img border="0" width="220" alt="Photobucket" src="http://i639.photobucket.com/albums/uu118/gustihana/melove-3-1.jpg" height="40" /></a><a href="http://budidhan.blogspot.com/" target="_blank"> <img border="0" width="220" alt="guru ganteng" src="http://i555.photobucket.com/albums/jj463/guruganteng/c495709ec87313.gif" height="40" /></a>
<br/>
<a target="_blank" href="http://agusfauzy.co.cc/"><img border="0" width="220" alt="mm" src="http://www.wargabisnis.com/image/agus03.gif" height="60" /></a><a href="http://anakwisma.blogspot.com/" target="_blank">
<br/>
<img border="0" width="220" alt="Gerobak Anak Wisma " src="http://i366.photobucket.com/albums/oo104/isdarmady/rpx.jpg" height="40" /></a><a href="http://tukeranlink.blogspot.com/" target="_blank">
<br/>
<img border="0" width="220" alt="Tukar Link" src="http://i184.photobucket.com/albums/x311/tukeranlink/Tukeranlink.gif" height="40" />
<br/>
</a><a target="_blank" href="http://www.gdpermana.blogspot.com/"><img border="0" width="220" alt="gd's blog" src="http://i381.photobucket.com/albums/oo253/gdpermana/cooltext415876826.jpg" height="40" /></a>

</marquee>


Selamat mencoba...!!