MEMBUAT TULISAN BERGERAK ( Marquee )

Hallo sobat, kali ini saya ingin berbagi pengetahuan tentang bagaimana caranya membuat tulisan bergerak pada tampilan artikel yang sobat buat. Dimana hal ini akan membuat pengunjung Blog anda semakin tertarik dengan tampilan atraktif yang anda buat sendiri. Sebetulnya saat inipun soery44blogspot.com sedang belajar membuat tulisan atau gambar bergerak dalam artikelnya, dan hasilnya cukup memuaskan buat saya. Harapan saya dengan ini kita bisa belajar bersama untuk menambah wawasan. Sobat dapat membuat scrolling teks (yaitu teks bergerak atau gambar bergerak) atau disebut juga marquee karena untuk membuatnya dengan menggunakan tag <marquee>. Sobat dapat membuat gambar atau teks bergerak dari kanan ke kiri, kiri ke kanan, atas ke bawah atau bawah ke atas - itu pilihan Anda!

Ada beberapa cara untuk memasang kode-kode marquee ini, sobat bisa memasang pada widget atau pada artikelnya.
Untuk memasang pada widget silahkan ikuti langkah berikut:

    - Buka menu Tata Letak / Layout
    - Klik Tambah Gadget
    - Pilih gadget HTML/JAVASCRIPT
    - Masukkan kode yang sudah dibuat
    - Simpan perubahan pada gadget

Sedangkan untuk memasang pada artikel ikuti langkah berikut:

    - Saat menulis artikel masuk ke mode HTML
    - masukkan kode HTML marquee saat berada di mode ini
    - Kembali ke mode Compose untuk melihat apakah posisi teks sudah benar
    - klik PRATINJAU untuk melihat versi web aktif

Perhatikan jika sobat tidak dapat melihat contoh, kemungkinan bahwa browser sobat tidak mendukung tag marquee.

Kode dasar untuk membuat marquee atau teks bergerak adalah....

     <marquee>TEKS INI BERJALAN</marquee>

Kode di atas akan terlihat seperti ini:
TEKS INI BERJALAN

Ada beberapa kode lain selain kode di atas yang bisa sobat tambahkan untuk membuat variasi dari marquee.
Contohnya seperti di bawah ini...

Kode direction="left/right/up/down" digunakan untuk mengatur arah pergerakan teks bergerak
Contoh kode:
<marquee direction="right">TEKS BERGERAK KE KANAN</marquee>
Hasilnya akan terlihat seperti di bawah ini:
TEKS BERGERAK KE KANAN

Sobat bisa membuat variasi dari kode di atas. Kita akan membuat teks ini bergerak turun, caranya kita perlu menambah kode height untuk membuat ruang pergerakan teks;
Contoh kode:
<marquee direction="down" height="150">TEKS BERGERAK KE BAWAH</marquee>
Hasilnya...
TEKS BERGERAK KE BAWAH

Ada beberapa kode lain selain kode di atas yang bisa sobat tambahkan untuk membuat variasi dari marquee.
Contohnya seperti di bawah ini...


kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
Contoh kode marquee:
<marquee scrolldelay="1000">TEKS BERGERAK PER 1 DETIK</marquee>
Hasilnya akan terlihat seperti di bawah ini:
TEKS BERGERAK PER 1 DETIK

kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang pergerakannya.
Contoh kode:
<marquee scrollamount="12">TEKS BERKECEPATAN 12!!!</marquee>
Hasilnya akan terlihat seperti di bawah ini:
TEKS BERKECEPATAN 12!!!

kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan
Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.
Contoh kode:

Hasilnya akan terlihat seperti di bawah ini:
TEKS BERGERAK MEMANTUL

kode title="pesan" digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan
Contoh kode:
<marquee title="TEKS TERBACA">TEKS BERGERAK TERBACA</marquee>
Hasilnya akan terlihat seperti di bawah ini:
TEKS BERGERAK TERBACA

kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada
Contoh kode:
<marquee width="70%">LEBAR MARQUEE 70 PERSEN</marquee>
Hasilnya akan terlihat seperti di bawah ini:
LEBAR MARQUEE 70 PERSEN

Selanjutnya kita akan membuat tulisan ini berhenti ketika dilintasi kursor mouse.
Caranya tambahkan kode seperti dibawah ini

onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti berikut:
<marquee behavior="alternate"onmouseover="this.stop()"onmouseout="this.start()">TEKS BERGERAK AKAN BERHENTI</marquee>
Tampilan akhir akan terlihat seperti berikut....
TEKS BERGERAK AKAN BERHENTI

Keterangan: Silahkan letakan kursor pada jalur ataupun teks untuk menghentikan pergerakan

Mudah, mari kita lihat dulu keterangan berikut :
Jenis huruf dan ukuran bisa diubah dengan menambahkan kode style="font-family: impact; font-size:24px; color: #cc0000;"

font-family: impact; adalah kode untuk mengubah jenis huruf. Jika sobat tidak suka dengan font impact, silahkan diganti dengan Arial, Times New Roman, dan lain-lain

font-size:24px; adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuai dengan keinginan sobat. Semakin besar nilainya, maka semakin besar juga hurufnya.

color:#cc0000; adalah kode untuk mengatur warna huruf. Silahkan mengganti kode hex #cc0000 dengan nilai hex yang sobat suka.
Contoh tampilan:
kode bgcolor="warna" digunakan untuk memberikan warna latar pada marquee jika diperlukan
Contoh kode marquee:
<marquee bgcolor="orange">TEKS BERGERAK LATAR ORANGE</marquee>
Hasilnya akan terlihat seperti di bawah ini:
TEKS BERGERAK LATAR ORANGE

Tentu saja bisa, langsung ke TKP...

Disini sobat cukup memasukan gambar pada kode marquee src = ( disini soery44blogspot.com ambil gambar format GIF dengan cara insert image dari folder picture).
Contoh kode
<marquee behavior="scroll" direction="left"> <img src="/pix/smile.gif" width="100" height="100" alt="smile" /> </ marquee>
Hasilnya akan terlihat seperti ini


Setelah melihat contoh-contoh diatas mungkin sobat ingin bertanya bisakah Marquee diberi link?
Tentu saja, sebagai contoh lihat kode berikut:
<marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="http://soery44.blogspot.com/2013/04/cara-membuat-tulisan-berjalan-marquee.html">MEMBUAT TULISAN BERGERAK (MARQUEE)</a>
</marquee> 
Maka akan terlihat seperti ini....
MEMBUAT TULISAN BERGERAK (MARQUEE)

Demikianlah sobat tutorial cara untuk membuat teks bergerak. Mudah-mudahan ini bisa menjadi motifasi buat sobat sekalian dalam menghias blog menjadi lebih menarik. Saatnya kini sobat bereksperimen untuk meramu kode-kode di atas. Sampai jumpa lagi di tutorial selanjutnya. Salam sukses