Salah satu penambahan animasi yang dibutuhkan untuk sebuah blog adalah tulisan berjalan yang dapat dimanfaatkan untuk menampilkan sebuah informasi penting. Tulisan berjalan / Running Text ini seringkali kita lihat pada acara berita yang disiarkan di televisi, terdapat potongan informasi yang disampaikan dengan running text atau teks berjalan yang bertujuan untuk mengarahkan pusat perhatian ke arahnya. Dalam dunia blog dikenal dengan nama Marquee, karena menggunakan kode bahasa HTML marquee. Ruang lingkupnya bukan hanya teks tetapi gambar juga bisa dibuat berjalan. Untuk tutorial gambar berjalan anda bisa melihat panduannya pada artikel berjudul Membuat Gambar Berjalan di Blog.
Banyak model tulisan berjalan dari kode marquee yang dapat dibuat dengan sangat mudah, karena memang sudah disediakan oleh bahasa HTML itu sendiri. Nah kali ini HARMANSYAH BLOG akan berbagi kode-kode HTML pembuat marquee lengkap dengan variasi dan atribut-atributnya.
Kode Dasar Marquee
<marquee>Tulisan Berjalan</marquee>Kode ini merupakan bentuk kode dasar, tulisan secara default akan berjalan dari kanan ke kiri dan berulang terus menerus.
Loop atau Perulangan Marquee
<marquee loop="5">Tulisan Berjalan Berulang 5 Kali</marquee>Loop menentukan banyak perulangan yang dilakukan marquee. Angka 5 menunjukkan jumlah perulangan, setelah berjalan 5 kali marquee tidak akan muncul lagi.
Jeda Waktu Marquee
<marquee scrolldelay="500">Tulisan Berjalan Dengan Delay 0,5 detik</marquee>Scrolldelay merupakan jeda waktu delay marquee. Angka 500 memiliki satuan milidetik, jadi sama dengan 0,5 detik. Tulisan akan berjalan setiap 0,5 detik. Apabila ingin menunda delay selama 1 detik maka ganti 500 menjadi 1000.
Warna Background Marquee
<marquee bgcolor="#000000">Tulisan Berjalan dengan Warna Background Warna Hitam</marquee>Bgcolor digunakan mengatur warna background marquee. Kode #000000 merupakan kode warna HTML untuk warna hitam, dapat diganti dengan warna dasar red, green, blue, atau yellow atau dengan kode HTML warna yang lain
Kecepatan Gerakan Tulisan
<marquee scrollamount="50">Tulisan Berjalan Dengan Kecepatan 50</marquee>Scrollamount digunakan mengatur kecepatan gerak marquee. Angka 50 merupakan kecepatan gerakan laju tulisan, kecepatan normal adalah 6.
Title Marquee
<marquee title="Pesan Anda Di Sini">Tulisan Berjalan</marquee>Title ini digunakan untuk menampilkan suatu pesan jika kursor mouse didekatkan pada jalur teks.
Arah Gerakan Marquee
<marquee direction="right">Tulisan Berjalan Ke Arah Kanan</marquee>Kode direction digunakan untuk mengatur arah gerakan marquee. Ada 4 arah yang bisa digunakan untuk mengatur arah gerakan marquee, antara lain : Right, Left, Up, dan Down.
<marquee direction="down">Tulisan Berjalan Ke Arah Bawah</marquee>
Lebar dan Tinggi Marquee
<marquee width="300">Lebar Teks Berjalan 300px</marquee>Kode width digunakan untuk mengatur lebar media yang menampung tulisan berjalan atau marquee, sedang height digunakan untuk mengatur tinggi media yang menampung marquee. Nilai lebar dan tingginya menggunakan satuan ps.
<marquee height="100">Tinggi Teks Berjalan 100px</marquee>
Jenis Gerakan Marquee
<marquee behavior="scroll">MARQUEE BERGERAK KE SISI</marquee>Kode behavior digunakan untuk mengatur jenis gerakan marquee. Jenis gerakan marquee ini ada 3, antara lain :
<marquee behavior="slide">MARQUEE BERGERAK TERSENDAT</marquee>
<marquee behavior="alternate">MARQUEE MEMANTUL</marquee>
1. scroll : Tulisan berjalan atau marquee akan menghilang ketika menabrak sisi kiri secara terus menerus (default).
2. slide : Tulisan berjalan atau marquee akan berhenti ketika menabrak sisi kiri.
3. alternate : Tulisan berjalan atau marquee akan memantul ketika menabrak kedua sisi.
Membuat Link pada Marquee
<marquee><a href="https://harmansh.blogspot.com/">Cara Membuat Tulisan Berjalan di Blog</a></marquee>Untuk membuat link pada teks yang berjalan, cukup dengan memasukkan kode HTML pembentuk link di dalam kode dasar marquee seperti contoh diatas.
Gerakan Marquee Berhenti ketika di Sentuh Cursor Mouse
<marquee onmouseover="this.stop()" onmouseout="this.start()">Tulisan Berjalan Berhenti Ketika Di Sentuh Cursor</marquee>Kode onmouseover="this.stop()" onmouseout="this.start()" digunakan untuk menghentikan gerakan laju marquee ketika disentuh oleh cursor mouse.
Mengatur Jenis, Ukuran, Ketebalan, dan Warna Font Marquee
<marquee style="font-family:calibri; font-size:20px; font-weight: bold; color:#ffffff;">Jenis Ukuran dan Warna Font Untuk Tulisan Berjalan</marquee>Kode style digunakan untuk mengatur jenis, ukuran, dan warna font marquee.
1. font-family untuk jenis font
2. font-size untuk ukuran font
3. font-weight untuk menebalkan font
4. color untuk warna font
Kombinasi Attribut Marquee
<div style="text-align: center;">
<span style="font-size: 50px;">
<marquee bgcolor="black" style="color: red;" direction="right" width="250">
<b>><(((((;>   ><(((((;>   ><(((((;>   ><(((((;></b>
</marquee>
<marquee bgcolor="black" style="color: blue;" direction="left" width="250">
<b><;)))))><   <;)))))><   <;)))))><   <;)))))><</b>
</span>
</marquee>
</div>
Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa attribut marquee sekaligus. Setelah mengetahui dan memahami dasar-dasar marquee, silahkan kreasikan marquee anda sendiri.
Cara Memasang Kode Marquee di Blog
Ada dua tempat yang biasa digunakan oleh para blogger untuk meletakkan kode marquee di blog, yakni antara lain : Widget dan Postingan seperti pada artikel ini. Berikut langkah-langkah pemasangan kode marquee di blog.
1. Widget
- Pilih menu Tata letak.
- Klik Tambahkan Gadget.
- Pilih widget HTML/JavaScript.
- Masukkan kode marquee ke dalam kolom konten.
- Klik Simpan atau Save.
2. Postingan
Ketika menulis artikel di blog pada editor postingan terdapat 2 mode penulisan, yakni mode HTML dan mode Compose. Mode compose digunakan saat anda akan menulis kalimat biasa untuk artikel sedangkan mode HTML digunakan saat anda akan memasukkan kode-kode HTML agar kode bisa berjalan seperti yang diinginkan, misalnya kode marquee.
Demikian tutorial sederhana mengenai bagaimana cara membuat tulisan berjalan / Running Text di blog. Semoga bermanfaat and " Happy Blogging "
Related Posts :
Silahkan
klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG
4 komentar:
Ilmu yang bermanpaat nih, dibikin selamat datang di blog saya tulisannya berjalan bagus
@Adi Pradana, terima kasih sob
Wuih, tampilan blog jadi terlihat kekinian adanya running text ini.
Aplikasi Marquee ini besarnya berapa MB ya, mas ?.
Pengin rasanya memasang running text seperti ini, tapi memberatkan loading page blog ngga ya, mas ?.
@Himawan sant, marquee ini hanya kode HTML biasa dan sederhana sehingga tidak memberatkan loading blog mas hima, beda dengan kode js
Post a Comment
...... Terima kasih telah berkunjung, silahkan berkomentar dengan baik sopan sesuai dengan tema konten dan tidak mengandung unsur Sara ......