Cara Membuat Tulisan Berjalan di Blog

Berguru SEO

Add Comment

Blogger Tips

16 January 2014

Contoh Tulisan Berjalan

Minggu lalu ada teman saya sebut saja Otong nanya begini ‘ eh, bro kira-kira bakal keren ya kalau blog kita
dibawahnya (footer) bisa dikasih teks berjalan mirip kayak di berita-berita yang ada di TV ’  spontan langsung
saya komentari bahwa hal tersebut sangat mungkin untuk diterapkan juga di Blog.

Dengan wajah lugu teman saya nanya lagi, ‘ emang gimana cara membuat tulisan berjalan di blog ? ’ nah,
daripada saya jelasin cara membuat tulisan berjalan tersebut langsung lewat mulut, agak ribet juga, untuk itu
saya tulis di blog ini, itung-itung nambah jumlah postingan blog.

Sekedar informasi, kalau di dunia blogging Tulisan Berjalan itu disebut Marquee, sebenarnya saya juga sedikit
bingung kenapa teks berjalan disebut Marquee padahal jika diartikan kedalam bahasa indonesia, Marquee
berarti Tenda Besar. Entah apa filosofi dibalik pemilihan kata Marquee tersebut.

Dah, dari tadi ngoceh mulu, sekarang kita masuk pada Cara Membuat Tulisan Berjalan (Marquee) di Blog.

Contoh Tulisan Berjalan / Marquee Standar

Untuk membuat Tulisan Berjalan seperti diatas, kita membutuhkan kode html seperti dibawah ini :

<marquee>Contoh Teks Yang Dikenai Marquee</marquee>

Si <marquee> inilah yang nantinya akan membuat seluruh Tulisan atau Teks yang diapit kode tersebut dapat
bergerak.

Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa tambahan efek apapun pada kode html. Kita pun bisa
memvariasikan kode <marquee> diatas dengan JavaScript atau HTML yang lain, agar lebih jelas kita masuk
contoh saja.

Cara Menambahkan Warna Background di Tulisan Berjalan

Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;"kedalam

kode marquee-nya, dibawah ini adalah contoh jika kita ingin memberi warna abu-abu pada Marquee Text.

<marquee style="background: gray;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-
abu</marquee>

Maka hasil dari kode HTML diatasa akan nampak seperti ini.

Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga bisa mengganti warna dari Teks diatas, agar
kontras dengan backgroundnya.

Cara Mengganti Warna Tulisan Berjalan

Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih agar
teks tersebut mudah untuk terbaca.

Kode yang kita pakai adalah seperti ini :

<marquee style="background: gray; color: white;">Contoh Teks Yang Dikenai Marquee Dengan
Background Abu-abu Teks Putih</marquee>

Dan Hasilnya akan nampak seperti dibawah ini :

Cara Membuat Tulisan Berjalan Setengah Layar

Selain mengganti warna dan juga background kita juga bisa membuat Tulisan Berjalan tersebut hanya tampil
dari tengah, tidak full dari kanan ke kiri.

Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya jika lebar selector Div
hanya 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).

Contoh penerapan dalam kode HTML :

<marquee width="50%">Contoh Teks Yang Dikenai Marquee Width 50%</marquee>

Kode HTML diatas akan membuat tulisan 'Contoh Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah
layar menuju ke kiri, atau lebih jelasnya seperti contoh dibawah ini :

Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan
tampil.

Diatas kita hanya menggunakan HTML dan CSS bukan, nah sekarang kita akan menambahkan JavaScript
kedalam kode <marquee> tersebut.

Cara Membuat Tulisan Berjalan Dengan Jeda

Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita bisa
menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan kode berikut.

<marquee scrolldelay="500">Contoh Teks Yang Dikenai Marquee Scrolldelay 500</marquee>

500 disini maksudnya adalah 0,5 Detik bukan 500 Detik. Jadi kode diatas jika dijalankan akan membuat Teks
yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.

Contohnya seperti dibawah ini :

Cara Mengatur Kecepatan Tulisan Berjalan

Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun jika Anda merasa
Tulisan Berjalan tersebut begitu amat cepat, Anda bisa dengan mudah mengatur kecepatannya, yaitu dengan
menambahkan scrollamount="angka"

Contoh penerapan dalam HTML :

<marquee scrollamount="10">Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount

10</marquee>

Dan kode tersebut akan menghasilkan efek seperti ini :

Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang
tahu, Tapi yang jelas jika Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan
tersebut akan makin cepat.

Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan

Seperti yang kita semua tahu, bahwa Standar dari Teks Berjalan adalah mengarah Dari Kanan ke Kiri. Namun
kali ini kita akan mencoba hal yang berbeda yaitu membalikkan arah pergerakannya (kiri ke kanan).
Kode HTML tambahan yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan
dengan <marquee> tentunya.

Contoh penggabungan :

<marquee direction="right">Contoh Tulisan Berjalan Dari Kiri ke Kanan</marquee>

Dan hasilnya akan menjadi seperti ini :

Cara Membuat Tulisan Berjalan Memantul

Agar Tulisan Berjalan tersebut dapat memantul, kita cukup menambahkan behavior="alternate".

Contoh penambahan ke dalam HTML :

<marquee behavior="alternate">Contoh Tulisan Berjalan Dengan Efek Memantul</marquee>

Hasilnya setelah kita terapkan :

Cara Membuat Tulisan Berjalan Dari Bawah ke Atas

Sebenarnya kode untuk membuat Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Cara
Membuat Tulisan Berjalan Dari Kiri ke Kanan, hanya saja kita mengubah valuenya menjadi direction="up"

Contoh penerspan :
<marquee direction="up">Contoh Tulisan Berjalan Dari Bawah ke Atas</marquee>

Dan Hasilnya :

Kata "up" juga bisa Anda ganti dengan down (untuk memberi efek tulisan berjalan dari atas ke bawah).

Cara Membuat Tulisan Berjalan Berhenti Ketika Disentuh Oleh Kursor

Mouse

Membaca dalam kondisi teks sedang berjalan memang saya akui cukup sulit, nah untuk itu ada kode JavaScript
(JS) untuk memecahkan masalah tersebut, yaitu onmouseover="this.stop()"
onmouseout="this.start()" kode JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut,
dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.

Contoh Penggabungan JavaScript diatas dengan kode HTML Marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()">Contoh Teks Yang Dikenai

Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>

Dan hasil dari kolaborasi JavaScript dan HTML diatas adalah seperti dibawah ini :