Cara Membuat Tulisan Berjalan / Running Text Di Blog

Saya yakin hampir semua dari kita pernah melihat tulisan berjalan / running text. Biasanya media seperti televisi menggunakannya untuk memberikan suatu informasi tertentu.

Nah, di sini saya akan membahas tentang bagaimana cara membuat tulisan berjalan di blog menggunakan kode html <marquee>.

Dengan kode html tersebut kita tidak hanya dapat membuat running text saja. Bahkan kita juga dapat membuat gambar berjalan.
Kita dapat membuat tulisan tertentu berjalan dari kiri ke kanan, bawah ke atas, dan sebagainya menggunakan kode <marquee>.

Cara Membuat Tulisan Berjalan Di Blogger

tulisan berjalan

Di sini saya akan menuliskan tutorial bagaimana cara membuat tulisan / gambar berjalan di blogger.
Walaupun demikian, sebenarnya kode <marquee> tidak hanya dapat digunakan pada blogger saja ya.

Anggap saja tutorial yang saya tuliskan ini sebagai gambaran jika ingin menggunakannya di platform lain.

Oke, mari kita mulai….

Membuat Tulisan Berjalan Di Posting / Laman Blogger

Berikut langkah – langkah yang harus dilakukan :

  • Masuk ke dasbor blogger.
  • Buat posting / laman baru.
  • Tulis isi seperti biasanya sampai selesai.
  • Ganti mode penulisan dari Compose menjadi HTML (gambar ada di bawah).
  • Pasang kode html tulisan berjalan pada posisi yang sobat mau.
  • Untuk meyakinkan apakah tulisan sudah berjalan sesuai keinginan silakan pratinjau dahulu.
  • Kalau sudah berjalan dan posisinya sudah pas, silakan terbitkan.
  • Selesai.
membuat tulisan berjalan di blog

Mana kode yang akan membuat tulisan berjalannya mas?…

Sabar…. Nanti sobat akan menemukannya di bawah.

Memasang Tulisan Berjalan Di Sidebar / Gadget

Kita juga dapat memasangnya pada gadget blogger. Berikut langkah-langkahnya :

  • Masuk ke blogger.
  • Buka halaman Tata Letak.
  • Klik Tambahkan Gadget Baru.
  • Pilih gadget HTML/JavaScript.
  • Masukkan tulisan berjalan pada bagian konten.
    • Pastikan sobat melihat tulisan Rich Text (gambar ada di bawah)
  • Simpan …. Selesai.
memasang teks berjalan

Selain 2 cara di atas, kita juga dapat menyisipkan tulisan berjalan langsung pada template yang digunakan jika mau.

Oke… mari kita lanjut ke pembuatan kode.

Sebenarnya untuk membuat tulisan berjalan kita hanya memerlukan 1 tag html, yaitu <marquee> (pembuka) dan </marquee> (penutup).

Misalnya kita ingin membuat teks “Salamat Datang Di Blog Saya” menjadi berjalan.

Maka kita dapat menulis teks tersebut terlebih dahulu baru mengurungnya dengan kode <marquee> dan </marquee>.

Atau menulis kode <marquee> dan </marquee> dahulu baru menyisipkan teks di antara keduanya.

Hasil kode seharusnya jadi seperti ini


<marquee>Salamat Datang Di Blog Saya</marquee>

Dan hasil di blog akan terlihat seperti ini

Salamat Datang Di Blog Saya

Itu kode yang paling sederhana yang secara default akan menampilkan tulisan berjalan dari kanan ke kiri.

Kita dapat membuatnya berjalan dari kiri ke kanan dengan menambahkan sedikit atribut direction="right"pada tag pembuka seperti ini


<marquee direction="right">Salamat Datang Di Blog Saya</marquee>

Maka hasilnya akan menjadi seperti ini

Salamat Datang Di Blog Saya

Kita juga dapat membuat teks bergerak dari atas ke bawah atau sebaliknya.

Membuat teks bergerak dari bawah ke atas
Kode


<marquee direction="up">Salamat Datang Di Blog Saya</marquee>

Hasil

Salamat Datang Di Blog Saya

Membuat teks bergerak dari atas ke bawah
Kode


<marquee direction="down">Salamat Datang Di Blog Saya</marquee>

Hasil

Salamat Datang Di Blog Saya

Apakah kecepatan teks berjalan dapat di atur?….

Bisa sob…. Yaitu dengan cara menambahkan atribut scrollamount="nilai". Yang mana nilai dapat kita tulis dengan angka 1, 2, 3, dst…

Secara default kode <marquee> sudah memiliki nilai scrollamount 6 atau sama dengan scrollamount="6". Jadi kita harus menggunakan angka 6 ke bawah atau ke atas.

Apabila angka yang kita gunakan di bawah dari angka 6, maka tulisan berjalan akan lebih lambat. Sebaliknya, kalau yang kita gunakan di atas dari 6, maka teks akan semakin cepat.

Cara penulisan seperti ini


<marquee scrollamount="9">Contoh Tulisan Berjalan</marquee>
<marquee>Contoh Tulisan Berjalan</marquee>
<marquee scrollamount="6">Contoh Tulisan Berjalan</marquee>
<marquee scrollamount="3">Contoh Tulisan Berjalan</marquee>

Hasil

Contoh Tulisan Berjalan
Contoh Tulisan Berjalan
Contoh Tulisan Berjalan
Contoh Tulisan Berjalan

Kalau dari kiri ke kanan seperti ini kodenya

loading...

<marquee scrollamount="8" direction="right">Contoh Tulisan Berjalan</marquee>
<marquee direction="right">Contoh Tulisan Berjalan</marquee>
<marquee direction="right" scrollamount="2">Contoh Tulisan Berjalan</marquee>

Hasil

Contoh Tulisan Berjalan
Contoh Tulisan Berjalan
Contoh Tulisan Berjalan

Kalau ingin membuatnya bergerak dari bawah ke atas atau sebaliknya silakan ganti direction="right" jadi direction="up" atau direction="down".

Membuat Tulisan Bergerak Bolak Balik

Untuk membuat teks berjalan tersebut jadi bolak balik / memantul / mondar mandir. Maka kita harus menambahkan atribut behavior="alternate" pada tag pembuka, seperti ini :


<marquee behavior="alternate">Salamat Datang Di Blog Saya</marquee>

Hasil

Salamat Datang Di Blog Saya

Silakan tambahkan atribut lainnya seperti untuk mempercepat / lambat teks, membuatnya berjalan dari kiri, atas, atau bawah.

Membuat teks bergerak diagonal / zig zag

Kode yang digunakan


<marquee direction="up" align="center" behavior="alternate"><marquee direction="right" behavior="alternate">Salamat Datang Di Blog Saya</marquee></marquee></marquee></marquee>

Hasil

<< Salamat Datang Di Blog SayaSalamat Datang Di Blog Saya >>

Tulisan Berjalan Secara Berlawanan

Kode yang digunakan


<marquee width="50%">&lt;&lt; Salamat Datang Di Blog Saya</marquee><marquee direction="right" width="50%">Salamat Datang Di Blog Saya &gt;&gt;</marquee>

Hasil
<< Salamat Datang Di Blog SayaSalamat Datang Di Blog Saya >>

Membuatnya berhenti berjalan ketika kursor di arahkan ke teks berjalan

Untuk membuatnya berhenti ketika kursor di arahkan ke tulisan, kita cukup menambahkan kode onmouseover="this.stop()" onmouseout="this.start()" pada tag pembuka.

Maka kalau ditulis jadi seperti ini


<marquee onmouseover="this.stop()" onmouseout="this.start()">Salamat Datang Di Blog Saya</marquee>

Hasil
Salamat Datang Di Blog Saya

Cara Memberi Warna Pada Teks Berjalan

Kita juga dapat mewarnai tulisan berjalan tersebut dengan menambahkan style seperti ini


<marquee  style="background:#FF0000;color:#FFFFFF">Salamat Datang Di Blog Saya</marquee>

Hasil
Salamat Datang Di Blog Saya

  • background:#FF0000 adalah yang membuat latar menjadi merah
  • color:#FFFFFF yang membuat tulisan menjadi putih

Untuk mengubah warna silakan ganti kode warna #FF0000 dan #FFFFFF dengan warna lainnya. Silakan buka halaman List Kode Warna CSS/HTML Lengkap.

Membuat Gambar Berjalan Menggunakan Kode Marquee

Selain teks, kita juga dapat menggunakan <marquee> untuk membuat gambar berjalan.

Caranya sebenarnya sama saja dengan membuat tulisan berjalan, bedanya cuma teks diganti dengan gambar.

Penulisan kode seperti ini


<marquee>Tulis kode gambar di sini</marquee>

Contoh nyata :


<marquee><img src="https://3.bp.blogspot.com/-L7E1uAGVwG0/WQYqPRRjXJI/AAAAAAAAFsU/xNx8-0PV9t4B76_aagOvr8MmmPPBi88LACLcB/s1600/img1.png"/></marquee>

Hasil
gambar 1

Kalau mau beberapa gambar juga bisa, seperti ini


<marquee>
<img src="https://3.bp.blogspot.com/-L7E1uAGVwG0/WQYqPRRjXJI/AAAAAAAAFsU/xNx8-0PV9t4B76_aagOvr8MmmPPBi88LACLcB/s1600/img1.png"/>
<img src="https://3.bp.blogspot.com/-9SB9o0WloHM/WQYqPZScA2I/AAAAAAAAFsM/sdrsN7hImGcvAzyUXi0PwQe2GbjnpttNACLcB/s1600/img2.png"/>
<img src="https://3.bp.blogspot.com/-9SB9o0WloHM/WQYqPZScA2I/AAAAAAAAFsM/sdrsN7hImGcvAzyUXi0PwQe2GbjnpttNACLcB/s1600/img2.png"/>
</marquee>

Hasil
gambar 1 gambar 2 gambar 33

Membuat objek berjalan hilang setelah beberapa kali lewat

Kita juga dapat membuat objek (teks / gambar) menghilang setelah beberapa kali jalan menggunakan atribut loop="nilai". Bagian nilai tinggal diganti dengan angka yang kita mau.

Misalnya kita ingin objek yang jalan hilang setelah 3 kali lewat.
Maka kita dapat menulisnya seperti ini


<marquee loop="3">Salamat Datang Di Blog Saya</marquee>

Hasilnya seperti ini
Salamat Datang Di Blog Saya

Pada gambar penulisannya juga sama kok, cuma teks saja diganti dengan gambar, seperti ini :


<marquee loop="3"><img src="https://3.bp.blogspot.com/-L7E1uAGVwG0/WQYqPRRjXJI/AAAAAAAAFsU/xNx8-0PV9t4B76_aagOvr8MmmPPBi88LACLcB/s1600/img1.png"/></marquee>

Nah itulah tutorial yang dapat saya tuliskan kali ini. Silakan kembangkan sendiri kode tersebut sesuai keperluan.

Semoga bermanfaat.

Loading...

JANGAN LUPA DOWNLOAD APLIKASI PRIBUMI ONLINE VERSI ANDROID
SILAKAN KLIK GAMBAR DI BAWAH INI

Comments

comments

Related posts

Leave a Comment