Cara Buat Teks Bergerak (Marquee)

Apabila Anda melihat link atau teks yg bergerak di sidebar blog ini, itu namanya marquee (baca, marki). Program html marquee ini berguna bukan saja untuk menarik tamu yg datang agar memperhatikan apa yg tertulis di dalamnya tapi juga berfungsi untuk menghemat ruang (space) sidebar kita sehingga lebih efektif dan efisien. Bagaimana cara membuat marquee?
Cara membuatnya mudah. Cukup Anda copy dan paste code html berikut ke sidebar blog atau di manapun sesuai keinginan Anda:

onmouseover='this.stop()' onmouseout='this.start()' width="100%">(teks atau link tulis di sini)

Contoh Marquee untuk link (copy & paste dan ganti contoh link sesuai keinginan Anda):

- Blogger Indonesia -
- Refleksi dan Blog Tutorial -
- Jobs Info -
- Beasiswa -
- Beasiswa -
- Beasiswa -
- Beasiswa -
- Beasiswa -
- Beasiswa -
- Loker -
- Loker -
- Loker -

 

Catatan:
1. Kode
adalah singkatan dari (line break) atau ganti garis, supaya setiap link tidak numpuk dalam satu baris. Bila jarak satu link dg link yg lain dianggap terlalu sempit, bisa ditambah dg kode
lagi. Sesuai selera.
2. Kode target="new" atau target="_blank" berfungsi agar supaya tercipta window baru ketika ada yg mengklik link yg ada dalam marquee sehingga pengunjung tidak meninggalkan blog Anda.
Contoh Marquee untuk teks:

onmouseover='this.stop()' onmouseout='this.start()' width="100%">Mengutip sebagian atau keseluruhan isi blog ini ke blog Anda dipersilahkan ASAL menyebut URL sumber tulisan dan/atau permanent link artikel yg dikutip.



Komentar, saran atau pertanyaan dapat diajukan melalui bukutamu, kotak komentar blog atau email ke: blogger.indonesia@gmail.com.

Catatan:
1. Jangan lupa untuk menyelipkan kode
untuk ganti garis atau paragraf.

TIP PENTING:
1. tag atau kode: direction=”up” artinya tulisan/teks bergerak ke atas seperti di blog ini, jadi kode “up” bisa diganti dg “down” bila ingin link/teks bergerak ke bawah; dan ganti menjadi “left” supaya bergerak ke kiri dan “right” supaya bergerak ke kanan.
2. Marquee hanya dapat digunakan di blogspot, self-hosted wordpress, dll.
3. a.Untuk di blogspot, klik Elemen -> Teks -> pasang kode marquee di atas.
b. Untuk self-hosted wordpress -> aktifkan widget -> naikkan widget text -> pasang kode marquee.
c. blogsome.com, blogs.ie dan self-hosted wordpress: klik manage -> files -> pasang kode marquee di sidebar.

Sebelum saya membahas mengenai marquee, saya akan berbicara sedikit mengenai apa itu marquee. Seperti judul postingan di atas, Marquee adalah Text Bergerak. Masih belum ngerti juga....?? silahkan lihat di bagian sidebar blog ini yang judulnya kerabatku.

Nah...pastinya kalo sudah liat itu sobat pasti tau apa itu marquee. OK.....sekarang saatnya bagaimana cara membuat marquee tersebut. Eittt tapi tunggu dulu...sebagai pengetahuan sobat saja, marquee bisa digunakan untuk text bergerak, link, dan gambar. Dan juga marque bisa digunakan di semua bagian blog. Tentunya....sobat harus tahu dulu bagaimana cara bikinnya . Ok..deh kita mulai aja.

Format dasar Marquee
Sebuah marquee mempunyai format seperti berikut :

TEXT atau LINK atau URL gambar anda

Nah....pada kata yang berwarna biru itu, silahkan ganti dengan Text / Link / Url Gambar yang akan sobat jadikan supaya bergerak.

Berikut keterangan dari kode HTML diatas :

• onmouseout="this.start()" --> text akan bergerak jika pointer tidak diarahkan ke text
• direction="up" --> text akan bergerak ke atas. Bisa diganti dengan down, left, atau right.
• align="center" --> text rata tengah
• scrollamount="2" --> kecepatan bergerak (makin besar angka berarti makin cepat)
• height="100px" --> batas vertikal marquee.
• onmouseover="this.stop()" --> marquee akan berhenti ketika mouse diarahkan ke zona marquee tersebut.
• width="200px" --> batas horizontal marquee.

Ket:

• Marquee tsb menggunakan link. Kalo sobat belum tahu cara buat link silahkan ikuti bagaimana Cara bikin link
• Saya sarankan untuk mempermudah sobat mempraktekkan marquee tsb, sobat simpan di sidebar blog sobat. Caranya klik layout pilih page element lalu add new page element kemudian pilih html/javascript, lalu paste kode diatas.

Selamat mencoba........