Cara Membuat Teks berjalan Serta Jenis-jenisnya (marquee) By: hardinfebunhas No comments

Untuk sedikit memberikan hiasan pada blog, sering kita lihat banyak blogger terlalu banyak memasang widget dalam jumlah yang tidak sedikit. Bahkan, sebagian dari mereka memasang widget tertentu yang tidak memberi dampak baik pada perkembangan blog. Padahal ada alternatif lain untuk menghiasi blog kita. Salah satunya dengan membuat text berjalan. Tulisan yang kita inginkan bisa kita buat bisa berjalan sesuai keinginan. Bukan hanya itu, file lain seperti gambar juga bisa kita buat berjalan sesuai keinginan. Untuk caranya akan madjongke.com berikan. Berikut cara membuat tulisan, gambar, dsb berjalan sesuai keinginan.

Untuk yang pertama adalah membuat teks berjalan paling dasar. Caranya hanya dengan menambah kode html marquue pembuka dan penutup pada teks yang ingin dibuat berjalan.

<marquee>Cara Membuat Teks berjalan</marquee>

Contohnya seperti dibawah ini

Cara Membuat Teks berjalan

Untuk membuat teks berjalan kearah kanan kita hanya tinggal menambahkan kode html direction="right" pada kode marquee pembuka

<marquee direction="right">Teks berjalan ke arah kanan</marquee>

Hasil dari penambahan kode tersebut seperti ini
Teks berjalan ke arah kanan

Berikutnya, kita akan membuat kode teks berjalan ke atas. Karena pada umumnya teks berjalan keatas membutuhkan luas yang kadang belum tersedia karena kode css sebelumnya, maka kita perlu menambahkan kode height="400". Ini untuk menyesuaikan tinggi ruang yang diperlukan, semakin tinggi angka yang dimasukkan maka semakin tinggi ruang yang kita buat. Dan yang paling utama adalah penambahan kode direction="up" 

<marquee direction="up" height="300">Madjongke.com</marquee>

Hasilnya

Madjongke.com

Jika ingin membuat ke arah bawah tinggal ganti kode up menjadi down

<marquee direction="down" height="300">Madjongke dot com</marquee>

Hasilnya akan seperti dibawah ini
Madjongke dot com

Selanjutnya jika membuat teks berjalan terpental, silahkan tinggal masukan kode html seperti dibawah ini.

<marquee behavior="alternate" direction="right">teks mental</marquee>

Dan hasilnya akan seperti ini

teks mental

Jika ingin mengatur kecepatan kode marquee yang ingin ditampilkan. Kita bisa menambahkan kode scrollamount="30" sesuaikan angka dengan keinginan. Semakin besar maka kecepatan akan semakin bertambah.

Contoh kode html

<marquee scrollamount="20" >Madjongke Ngebut</marquee>

<marquee scrollamount="2">Motor Tua</marquee>

<marquee scrollamount="35" >Rossi Ngebut</marquee>

Dan hasilnya seperti ini

Madjongke Ngebut

Motor Tua

Rossi Ngebut

Untuk mengganti teks dengan gambar silahkan ganti teks dengan kode html <img alt="madjongke" src="url gambar">

Contoh kode html marquee

<marquee><img alt="madjongke" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqevDW1Ojym72Y1YPbR3xlcQAvsPJ7suIarsyt3FYJioxxl3hwWmzhwU3FIdZbaSV8eY_19EwTJpCJTUnPKtQWYo7UjKqWJKWMzLs7edHM2vqXLomlzFt9UedbivmDB-5EY08ASngnszlQ/s1600/wanita-madjongkedotcom.jpg"></marquee>

Hasilnya

Pelajaran berikutnya, jika ingin membuat teks berjalan berhenti saat disorot pointer mouse, caranya dengan menambahkan kode onmouseover="this.stop()".

Contoh

<marquee onmouseover="this.stop()">Rider tanpa helm</marquee>

Dan hasilnya seperti ini

Rider tanpa helm

Jika ingin membuatnya bisa berjalan lagi tambahkan kode onmouseout="this.start()" 

Contoh

<marquee onmouseout="this.start()" onmouseover="this.stop()">Rider tanpa helm tapi banyak duit</marquee>

Dan hasilnya seperti ini

Rider tanpa helm tapi banyak duit