Cara Membuat Tulisan Berjalan [Marquee]

K

etika Anda membaca salah satu artikel, di bagian bawah di atas kotak komentar pastinya Anda bakal melihat tulisan berjalan berwarna putih dengan background hijau. Dan pastinya Anda juga bertanya, kok bisa yaa tulisannya berjalan..?? hehe5.. Tujuan adanya tulisan berjalan ini tentunya kita semua sudah banyak yang tahu, apa lagi kalau bukan untuk mempercantik tampilan blog kita, yaa kan..!!

Nah.., kali ini saya akan membuat membuat tulisan atau postingan tentang bagaimana cara membuat tulisan berjalan di postingan, widget ataupun menempel pada template Anda. Mungkin beberapa dari Anda sudah penasaran kan. Berikut cara pembuatannya :

[1]. Login ke Blogger
[2]. Kemudian klik Tata Letak dan Elemen Halaman
[3]. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
[4]. Lalu pilih HTML/JavaScript
[5]. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

A. Tulisan Berjalan Dari Kanan Ke Kiri

Kode :

<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="left" scrollamount='3'><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</marquee></div>

Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS

B. Tulisan Berjalan Dari Kiri Ke Kanan

Kode :

<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="right" scrollamount='3'><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</marquee></div>

Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS

C. Tulisan Berjalan Bolak-balik

Kode :

<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="left" scrollamount='3' behavior="alternate"><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></marquee></div>

Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS

D. Tulisan Berjalan Dari Atas Ke Bawah

Kode :

<div cols="45" rows="5" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background-color: #5fb404; border: 1px double rgb(95, 180, 4); color: white; font-size: 16px; line-height: 1.1em; padding: 5px;">
<marquee align="center" direction="down" scrollamount="3"><center><span style="font-family: Gruppo;">HARIO PAMUNGKAS</span></center></marquee></div>

Hasil :

HARIO PAMUNGKAS

E. Tulisan Berjalan Dari Bawah Ke Atas

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3'><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></div>

Hasil :

HARIO PAMUNGKAS

F. Tulisan Berjalan Naik-Turun

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></div>

Hasil :

HARIO PAMUNGKAS

G. Tulisan Berjalan Zig-Zag Tembus

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate" ><marquee direction="right"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></marquee></div>

Hasil :

HARIO PAMUNGKAS

H. Tulisan Berjalan Zig-zag Mantul

Kode :

<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><marquee direction="right" behavior="alternate"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></marquee></div>

Hasil :

HARIO PAMUNGKAS

I. Gambar Berjalan Zig-zag Mantul

Kode :

<div cols='45' rows='7' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><marquee direction="right" behavior="alternate"><a href="http://hariopamungkas.blogspot.com/" target="_blank"  title="Hario Pamungkas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXFjlLNV0TaelIGjSEx0ecbSX0_aEQzHMLBJ0PUvYlGrtF7ZG5c6Sg-Xv1Jx6nJOtmC1w2-5eV2p-0pKViruCaLHcMzr__LnwLjEqfB20T4aqMqAC4ZYv4rie9CmQskhC3B-cDMxhQEs/s1600/banner+aku2.png" alt="Hario Pamungkas"/></a></marquee></marquee></div>

Hasil :

Catatan :

direction="left/right/up/down" --> mengatur arah gerakan teks.
scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi
Jika ingin menghapus background, tinggal hapus saja background-color:#5FB404; pada kode di atas.
Jika ingin mengganti tulisan "HARIO PAMUNGKAS" dengan gambar seperti pada contoh terakhir, silahkan ganti tulisan tersebut dengan kode sumber gambar yang ingin Anda tampilkan, contoh : <a href="http://hariopamungkas.blogspot.com/" target="_blank" title="Hario Pamungkas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXFjlLNV0TaelIGjSEx0ecbSX0_aEQzHMLBJ0PUvYlGrtF7ZG5c6Sg-Xv1Jx6nJOtmC1w2-5eV2p-0pKViruCaLHcMzr__LnwLjEqfB20T4aqMqAC4ZYv4rie9CmQskhC3B-cDMxhQEs/s1600/banner+aku2.png" alt="Hario Pamungkas"/></a>

Nahh.. di atas ada berbagai macam contoh tulisan atau gambar berjalan. Jika Anda ingin mempercantik blog Anda dengan tulisan berjalan, alangkah lebih baiknya Anda mencobanya, hehe5..

Selamat mencoba yaa dan semoga bermanfaat...