Cara Membuat Tulisan Berjalan (Marquee) ~ Sering kali kita melihat running text / teks berjalan
baik itu di layar bawah TV atau media media lainnya yang semata-mata
untuk maksud mengarahkan pusat perhatian ke arahnya. Dalam dunia blog
dikenal dengan nama Marquee, Karena menggunakan kode bahasa HTML
marquee.
Banyak model tulisan berjalan dari "bahan" marquee yang dapat kita buat dengan sangat mudah, Karena memang sudah disediakan oleh bahasa HTML itu sendiri.
Nah, bila Anda ingin mencoba membuat tulisan berjalan maka silahkan simak caranya berikut :
1. Kode dasar marquee untuk membuat tulisan berjalan adalah :
Banyak model tulisan berjalan dari "bahan" marquee yang dapat kita buat dengan sangat mudah, Karena memang sudah disediakan oleh bahasa HTML itu sendiri.
Nah, bila Anda ingin mencoba membuat tulisan berjalan maka silahkan simak caranya berikut :
1. Kode dasar marquee untuk membuat tulisan berjalan adalah :
<marquee>TULISAN BERJALAN</marquee>
Hasilnya :
2. kode loop="angka|-1|infinite" , kode ini digunakan untuk melakukan pengaturan proses pengulangan sebuah marquee.
contoh perintah kode marquee :
kode di atas merupakan bentuk kode dasar, Diperlukan tambahan kode lain jika menginginkan variasi gerak lainnya dari sebuah marquee.
TULISAN BERJALAN
2. kode loop="angka|-1|infinite" , kode ini digunakan untuk melakukan pengaturan proses pengulangan sebuah marquee.
contoh perintah kode marquee :
<marquee loop="5">MARQUEE AKAN BERPUTAR 5 KALI LALU MENGHILANG</marquee>
Hasilnya :
3. kode scrolldelay="angka" , kode ini digunakan untuk mengatur waktu delay selama "angka", Jadi bila ingin menunda delay selama 1 detik maka ganti "angka" menjadi 1000, atau bila ingin 0.5 detik maka diganti dengan 500.
Contoh perintah marquee :
<marquee scrolldelay="500">TEKS BERJALAN DAN DELAY SELAMA 0.5 DET</marquee>
hasilnya :
Contoh perintahnya :
<marquee bgcolor="yellow">TEXT DENGAN BACKGROUND HIJAU</marquee>
hasilnya :
contoh perintah :
<marquee scrollamount="10">Kecepatan Tulisan berjalan 10</marquee>
hasilnya :
contoh perintah :
<marquee direction="right">TEKS BERJALAN KE KANAN</marquee>
<marquee direction="up">TEKS BERJALAN KE ATAS</marquee>
hasilnya :
contoh perintah :
<marquee width="50%">LEBAR MEDIA 50 %</marquee>
hasilnya :
contoh perintah :
<marquee title="PESAN DI SINI">MARQUEE berisi pesan tertentu</marquee>
hasilnya :
- Scroll bila ingin text berjalan terus ke salah satu sisi
- Slide bila ingin text berjalan tersendat-sendat
- Alternate bila ingin text berjalan seperti memantul
contoh perintah :
<marquee behavior="scroll">MARQUEE BERGERAK KE SISI</marquee>
<marquee behavior="slide">MARQUEE BERGERAK TERSENDAT</marquee>
<marquee behavior="alternate">MARQUEE MEMANTUL</marquee>
hasilnya :
contoh perintah :
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">TULISAN BOLAK BALIK</marquee>
hasilnya :
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><a href="http://caramadia.blogspot.com/2015/08/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a></marquee>
MARQUEE AKAN BERPUTAR 5 KALI LALU MENGHILANG
3. kode scrolldelay="angka" , kode ini digunakan untuk mengatur waktu delay selama "angka", Jadi bila ingin menunda delay selama 1 detik maka ganti "angka" menjadi 1000, atau bila ingin 0.5 detik maka diganti dengan 500.
Contoh perintah marquee :
<marquee scrolldelay="500">TEKS BERJALAN DAN DELAY SELAMA 0.5 DET</marquee>
hasilnya :
TEKS BERJALAN DAN DELAY SELAMA 0.5 DET4. kode bgcolor="warna" , kode ini digunakan untuk mengatur warna background tulisan berjalan. "warna" dapat diganti menggunakan bahasa Inggris yang menyatakan jenis warna
Contoh perintahnya :
<marquee bgcolor="yellow">TEXT DENGAN BACKGROUND HIJAU</marquee>
hasilnya :
TEXT DENGAN BACKGROUND KUNING5. kode scrollamount="angka" , kode digunakan untuk mengatur kecepatan gerakan tulisan berjalan. Semakin besar "angka" semakin cepat juga gerakannya.
contoh perintah :
<marquee scrollamount="10">Kecepatan Tulisan berjalan 10</marquee>
hasilnya :
Kecepatan Tulisan berjalan 106. kode direction="left/right/up/down" , kode ini digunakan untuk mengatur arah gerakan tulisan yang diinginkan.
contoh perintah :
<marquee direction="right">TEKS BERJALAN KE KANAN</marquee>
<marquee direction="up">TEKS BERJALAN KE ATAS</marquee>
hasilnya :
TEKS BERJALAN KE KANAN TEKS BERJALAN KE ATAS7. kode width="lebar" , kode ini digunakan untuk mengatur lebar media yang akan menampung marquee
contoh perintah :
<marquee width="50%">LEBAR MEDIA 50 %</marquee>
hasilnya :
LEBAR MEDIA 50 %8. kode title="pesan" , kode ini digunakan untuk menampilkan suatu pesan jika kursor mouse didekatkan pada jalur teks
contoh perintah :
<marquee title="PESAN DI SINI">MARQUEE berisi pesan tertentu</marquee>
hasilnya :
MARQUEE berisi pesan tertentu9. kode behavior="scroll/slide/alternate" , kode ini digunakan untuk mengatur jenis gerakan, Yaitu :
- Scroll bila ingin text berjalan terus ke salah satu sisi
- Slide bila ingin text berjalan tersendat-sendat
- Alternate bila ingin text berjalan seperti memantul
contoh perintah :
<marquee behavior="scroll">MARQUEE BERGERAK KE SISI</marquee>
<marquee behavior="slide">MARQUEE BERGERAK TERSENDAT</marquee>
<marquee behavior="alternate">MARQUEE MEMANTUL</marquee>
hasilnya :
MARQUEE BERGERAK KE SISI MARQUEE BERGERAK TERSENDAT MARQUEE MEMANTUL10. kode onmouseover="thsi.stop()" onmouseout="this.start()" , kode ini digunakan jika ingin tulisan berhenti bergerak jika ada mouse mengenainya.
contoh perintah :
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">TULISAN BOLAK BALIK</marquee>
hasilnya :
TULISAN BOLAK BALIK11. Membuat link di tulisan berjalan
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()"><a href="http://caramadia.blogspot.com/2015/08/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a></marquee>
CARA MEMBUAT TULISAN BERJALAN (MARQUEE)
Cara Memasang Kode Marquee di Blog
Setelah mengetahui model - model penerapan kode marquee, Maka langkah selanjutnya ialah mengetahui cara memasangnya di blog. Ada dua jenis tempat yang digunakan untuk memasang kode tersebut, yaitu pada widget dan di dalam postingan. Penjelasannya berikut :
1. memasang kode di widget
- Masuk ke menu Tata Letak ( Layout )
- Klik Tambahkan Gadget
- Pilih gadget HTML / JavaScript
- Masukkan kode marque yang ingin dibuat pada bidang konten
- Simpan
2. memasang kode di postingan ( artikel )
- Pada bidang postingan, Klik mode HTML
- Masukkan kode HTML marquee
- Klik mode Compose untuk kembali melanjutkan postingan lainnya
3. memasang kode di dalam template
- lakukan parse kode HTML marquee terlebih dahulu
- klik menu template di dashboard blogger
- klik Edit HTML
- letakkan kode HTML marquee yang telah diparse pada posisi yang ingin ditampilkan
- save template
Cara Menambahkan Warna, Ukuran Huruf, Jenis Huruf pada Tulisan Berjalan Marquee
Dengan menambahkan beberapa kode lagi maka dilakukan perubahan terhadap jenis huruf, ukuran, maupun warna teks berjalan,
Misalnya kode :
style="font-family:arial; font-size:20px; color:#ffffff;"
font-family:arial; --> kode untuk mengubah huruf menjadi jenis huruf arial
font-size:20px; --> kode untuk mengatur besar huruf
color#ffffff; --> kode untuk mengubah warna huruf
contoh :
<marquee bgcolor="blue" style="font-family:arial; font-size:20px; color:#ffffff;">TEKS BERJALAN WARNA LATAR BIRU</marquee>
hasilnya :
Nah, itulah cara membuat tulisan berjalan (marquee), model di atas hanyalah sebagai contoh, masih banyak model marquee yang bisa dibuat sesuai dengan kreatifitas Anda.
Semoga dapat memberikan manfaat, Salam sukses!
Misalnya kode :
style="font-family:arial; font-size:20px; color:#ffffff;"
font-family:arial; --> kode untuk mengubah huruf menjadi jenis huruf arial
font-size:20px; --> kode untuk mengatur besar huruf
color#ffffff; --> kode untuk mengubah warna huruf
contoh :
<marquee bgcolor="blue" style="font-family:arial; font-size:20px; color:#ffffff;">TEKS BERJALAN WARNA LATAR BIRU</marquee>
hasilnya :
TEKS BERJALAN WARNA LATAR BIRU
Nah, itulah cara membuat tulisan berjalan (marquee), model di atas hanyalah sebagai contoh, masih banyak model marquee yang bisa dibuat sesuai dengan kreatifitas Anda.
Semoga dapat memberikan manfaat, Salam sukses!
0 komentar:
Posting Komentar
Mau komen? Silahkan. Tapi yang sopan yaaa? hehehe :D