Membuat efek tulisan berjalan di blog atau postingan

Sobat pasti pernah lihat di suatu situs/blog yang menampilkan kata/tulisan selamat datang atau semacamnya.Kata/tulisan tersebut bisa bergerak dengan arah dan sifat-sifat tertentu.
Dalam bahasa HTML, efek semacam itu kita kenal sebagai efek MARQUE (tulisan berjalan).
Baiklah, mari kita bahas macam-macam efek MARQUE

1. Text berjalan ke arah kiri/kanan/atas/bawah sederhana

Kode HTML yang digunakan:
T<marquee behavior="scroll" direction="right"><marquee behavior="scroll" direction="right">kamu cantik banget sih?</marquee>&htmlup=1;/marquee><br />

Maka hasilnya:
kamu cantik banget sih?

NB:

• Right bisa diganti Left/Up atau Down untuk menentukan arah gerakan dari teks yang akan kita tampilkan
• kamu cantik banget sih? ini hanya contoh saja. ganti dengan teks yang sobat inginkan

2. Text berjalan ke arah kiri/kanan/atas/bawah sederhana disertai gambar

<marquee behavior="scroll"><br /> <img height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwGSki0BeYQb5MJzSsitbzN_wYEokv1AqBwDSsR-MQjiRJC4JbJcUHQob8d43RQRpdkmFmN-Sgqtb4jG6QrRRoYIbF4w7pvsGkZW2zh4iAq80rAsOgFKhafvgrivqFwOL2H8mK-TUC-Es/s320/stumbleupon_button_Logo.jpg" width="80" /><br /> contoh tulisan dibawah gambar<br /> </marquee>

Maka hasilnya:


contoh tulisan dibawah gambar

NB:

• Angka 50 adalah tinggi gambar
• Angka 80 adalah lebar gambar
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwGSki0BeYQb5MJzSsitbzN_wYEokv1AqBwDSsR-MQjiRJC4JbJcUHQob8d43RQRpdkmFmN-Sgqtb4jG6QrRRoYIbF4w7pvsGkZW2zh4iAq80rAsOgFKhafvgrivqFwOL2H8mK-TUC-Es/s320/stumbleupon_button_Logo.jpg bisa diganti dengan URL dimana gambar nanti akan muncul
• contoh tulisan dibawah gambar adalah teks yang akan muncul di bawah gambar

3. Teks Memantul
kode HTML yang digunakan:

<marquee width="300" behavior="alternate">Tulisan yang bisa memantul</marquee>

Maka hasilnya:

Tulisan yang bisa memantul

NB:

• angka 300 adalah lebar area pantulan 
• Tulisan yang bisa memantul adalah teks yang bisa sobat ganti sesuka hati

4. Teks berjalan yang akan berhenti jika tersentuh mouse
kode HTML yang digunakan

<marquee onMouseOver=this.stop() onMouseOut=this.start()>Teks ini akan berhenti jika anda menyentuhnya</marquee>

Makan hasilnya:

Teks ini akan berhenti jika anda menyentuhnya

NB: Teks ini akan berhenti jika anda menyentuhnya bisa diganti dengan teks yang diinginkan.

5. Teks Zig-zag
Kode HTML yang digunakan:

<marquee behavior="alternate" direction="up" height="50"><br /> <marquee direction="right">Zig-zag oh Zig-zag</marquee><br /> </marquee>

Maka hasilnya:
Zig-zag oh.. Zig-zag


NB:
up bisa diganti down, hasilnya sama saja
right bisa diganti sesuai dengan arah yang diinginkan (left/up/down)
Zig-zag oh Zig-zag ganti dengan teks yang akan ditampilkan

6.Text berjalan dengan background warna tertentu
Kode HTML yang digunakan:

<b><marquee behavior="alternate" bgcolor="BLUE" height="40" scrollamount="3" width="500"><br /> Contoh teks dengan background!</marquee></b>

Maka hasilnya:

Contoh teks dengan background!

NB:

• BLUE ganti dengan warna yang diinginkan
• angka 3 kecepatan gerakan. Makin besar nilainya makin cepat geraknya
• angka 40 adalah tinggi area background
• angka 500 adalah lebar area background

Sebenarnya masih banyak lagi efek-efek lainnya. Misalnya Text berupa Link, dsb..  sobat bisa mencobanya sendiri :))

Tweet

Share