Cara Membuat Teks Berjalan

Cara Membuat Teks Berjalan (Marquee) di Blog

Cara Membuat Teks Berjalan – Terkadang ketika kita browsing atau blogwalking kita sering menemui sebuah blog yang di atas atau di bawah layarnya muncul tulisan atau teks yang berjalan. Ini juga sering kita temui di Media TV yang mana kebanyakan isi dari teks berjalan tersebut adalah berita terbaru atau kata-kata sambutan selamat datang.

Tentu kita sangat tertarik ya dengan teknik tersebut dan tentu anda juga mau dong jika blog sobat juga memiliki teks berjalan seperti blog-blog tersebut? Tapi anda pasti bertanya-tanya gimana ya cara membuat tulisan berjalan seperti itu? Tenang kabar baiknya pada postingan kali ini saya akan memberikan tutorialnya untuk sobat blogger semua…mau? tentu mau dong hehe kan gratis…

Baca juga: Cara Membuat Efek Salju di blog
Sebetulnya untuk cara membuat teks berjalan ini sangat mudah sekali dan ada 2 cara namun karena cara yang pertama sudah tidak bisa di pakai lagi yaitu lewat online dan menggunakan layanan pihak ketiga. Makanya saya akan memakai cara yang kedua saja. Cara membuat teks berjalan yang akan kita pelajari ini yaitu menggunakan kode HTML. Untuk itu mari kita pelajari dulu cara membuat kodenya dulu ya. Nanti silahkan anda kreasikan sendiri sesuai kebutuhan anda.

Dan di bawah ini adalah Kode dasar untuk membuat teks berjalan tersebut:

<marquee>TULISAN YANG AKAN BERJALAN</marquee>

Dan hasilnya akan nampak seperti ini:

TULISAN YANG AKAN BERJALAN

Kalo hanya tulisan begitu saja tentu kurang menarik ya untuk pengunjung blog kita, untuk itu anda bisa menambahkan beberapa kode variasi untuk kode marquee tersebut. Dan dibawah ini saya juga akan sertakan kode-kode tambahan dan sekaligus mari kita praktekan juga.

Adapun kode-kode tambahan tersebut adalah:

  1. Scrolldelay=”angka” Kode ini kita gunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
    Contoh kode marquee dengan kode Scrolldelay:<marquee scrolldelay=”500″>TEKS BERJALAN DALAM WAKTU 0,5 DETIK</marquee>Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERJALAN DALAM WAKTU 0,5 DETIK

  2. Loop=”angka|-1|infinite” digunakan untuk mengatur pengulangan atau repetisi dari marquee
    Contoh:
    <marquee loop=”3″>TEKS BERJALAN HANYA 3 KALI SAJA</marquee>
    Contoh Hasil Cara Membuat Tulisan berjalan dengan kode loop:
    TEKS BERJALAN HANYA 3 KALI SAJA
    Keterangan: Setelah 3 kali teks akan hilang.
  3. Width=”lebar” kode width ini digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada.Contoh Cara Membuat Tulisan berjalan dengan kode Width:<marquee width=”50%”>TULISAN BERJALAN DENGAN LEBAR 50 PERSEN</marquee>
    Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERJALAN DENGAN LEBAR 50 PERSEN

  4. Bgcolor=”warna” Kode ini biasa digunakan untuk memberikan warna latar pada tulisan berjalan jika diperlukan, Contoh teks berjalan dengan kode marquee:<marquee bgcolor=”yellow”>TULISAN BERJALAN DENGAN LATAR KUNING</marquee>
    Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERJALAN DENGAN LATAR KUNING

  5. Title=”pesan” Kode ini digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan, Contoh teks berjalan dengan Title:<marquee title=”BISA TERBACA PESANNYA”>TEKS BERJALAN DENGAN PESAN</marquee>
    Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERJALAN DENGAN PESAN
    Keterangan: Taruh kursor mouse pada jalur dan bukan pada teks untuk membaca pesan
  6. Scrollamount=”angka” digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang, Contoh Teks berjalan dengan kode scrollamount:<marquee scrollamount=”14″>TEKS BERJALAN KECAPATAN 14!!!</marquee>
    Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERJALAN KECAPATAN 14!!!

  7. Direction=”left/right/up/down” digunakan untuk mengatur arah pergerakan running text, misal kebawah,ke atas, kesamping, kekanan atau kekiri, Contoh kode:<marquee direction=”right”>TEKS BERGERAK KE KANAN</marquee>
    Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERGERAK KE KANAN

  8. Behavior=”scroll/slide/alternate” digunakan untuk mengatur type pergerakan
    – Scroll artinya jika ingin teks yang anda buat bergerak terus ke suatu sisi dan muncul dari sisi lain
    – Slide artinya jika ingin teks yang anda buat bergerak sekali kemudian berhenti dan diulangi lagi
    – Alternate artinya jika ingin teks yang anda buat terlihat memantul/bouncing dari ujung kembali ke ujung.
    Contoh kode:<marquee behavior=”alternate”>TEKS BERGERAK BOLAK-BALIK</marquee>Hasilnya akan terlihat seperti di bawah ini:
    TEKS BERGERAK BOLAK-BALIK

Cara Membuat Teks Berjalan Bergerak

Sekarang kita akan coba membuat variasi dari kode di atas. Kita akan membuat teks ini bergerak turun dan oleh karena itu kita perlu menambah kode height untuk membuat ruang pergerakan teks;

  • Contoh kode:
    <marquee direction=”down” height=”100″>TEKS BERGERAK KE BAWAH</marquee>
    Hasilnya…
    marquee direction=”down” height=”100″>TEKS BERGERAK KE BAWAH

Lalu bagaimana caranya membuat tulisan ini berhenti jika dilintasi kursor mouse?

Mudah, silahkan tambahkan kode

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

  • Contoh kodenya seperti berikut:
    <marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>TEKS BERGERAK BOLAK-BALIK</marquee>
    Tampilan akhir akan terlihat seperti berikut….TEKS BERGERAK BOLAK-BALIK
    Keterangan: Silahkan lintaskan kursor pada jalur ataupun teks untuk menghentikan pergerakan

Bisakah Marquee diberi link?

Baca Juga: Cara Membuat Blog Gratis di Blogspot

Tentu saja, sebagai contoh lihat kode berikut:

<marquee direction=”down” height=”100″ onmouseover=”this.stop()” onmouseout=”this.start()” scrollamount=”4″>

<a href=”http://trikmudahseo.blogspot.com/2012/09/cara-membuat-tulisan-berjalan-marquee.html”>CARA MEMBUAT TEKS BERJALAN (MARQUEE)</a></marquee>

Tampilan akhir akan terlihat seperti berikut….
CARA MEMBUAT TEKS BERJALAN (MARQUEE)

Selain kode-kode diatas sobat juga masih bisa menambah berbagai variasi untuk teks berjalan tersebut, diantaranya dengan menambah warna huruf,ukuran huruf, dan juga mengubah jenis huruf pada teks tersbut. Dan di bawah ini adalah contoh-contohnya:

Mengubah Huruf, Warna dan Ukuran Huruf Teks Berjalan Marquee

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 anda 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 sesuka hati anda. 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 anda suka.

Contoh kodenya:

<marquee bgcolor=”yellow” style=”font-family: impact; font-size:24px; color:#cc0000;” >TEKS BERJALAN LATAR KUNING</marquee>

Contoh tampilan:

TEKS BERJALAN LATAR KUNING

cara memasang kode tulisan berjalan di blog

Ada dua cara untuk memasang kode-kode tulisan yang sudah anda buat tadi di blog, yaitu bisa di pasang di widget atau di artikel. Adapun kedua caranya lihat dibawah ini:

  1. Buka menu Tata Letak / Layout atau Appearance untuk pengguna wordpress
  2. Klik Tambah Gadget atau Widget untuk wordpress
  3. Pilih gadget HTML/JAVASCRIPT atau TEXT
  4. Masukkan kode yang sudah dibuat
  5. Simpan perubahan pada gadget

Untuk memasang pada artikel ikuti langkah berikut:

  1. Saat menulis artikel masuk ke mode HTML/TEXT
  2. masukkan kode HTML marquee saat berada di mode ini
  3. Kembali ke mode Compose/Visual untuk melihat apakah posisi teks sudah benar
  4. Klik PRATINJAU untuk melihat versi web aktif

Ok guys, itulah cara membuat teks berjalan (Marquee) yang bisa anda terapkan di blog sobat masing-masing agar terlihat lebih keren dan menarik di mata pengunjung blog sobat sekalian. Silahkan kreasikan sendiri menurut selera dan tampilan blog anda. Semoga tutorial ini bermanfaat ya. Jika ada pertanyaan jangan lupa kirim lewat kolom komentar.

%d bloggers like this: