Thứ Sáu, 4 tháng 3, 2011

Belajar Membuat Text Berjalan (Marquee)

Salah satu bentuk modifikasi tulisan di blog adalah dengan membuat efek teks yang bisa bergerak. Bisa dari kanan ke kiri, atau dari atas ke bawah dan sebaliknya. Teks efek ini disebut marquee, untuk lebih jelasnya pengertian dari Marquee adalah bahasa HTML untuk memberikan efek sebuah kata atau kalimat menjadi berjalan atau bergerak. Marquee ini mempunyai daya tarik tersendiri karena animasi berjalan/bergeraknya tersebut, selain itu penggunaan marquee ini bisa menghemat tempat pada blog anda.
Misalkan anda mempunyai sebuah widget khusus pertukaran link yang di pasang di sidebar, bila pertukaran link anda sudah mencapai puluhan atau ratusan tentu saja akan membuat sidebar anda menjadi sangat panjang dan yang pasti akan terlihat sangat jelek. Saya sendiri mencoba menggunakan marquee ini pada widget random post agar terlihat lebih unik ( mungkin ), tapi itu hanya percobaan saja.
Kekurangan marquee yang baru saya temukan adalah ketika konten atau isi dari marquee melebihi kapasitas (height atau width), sewaktu loading blog belum selesai seluruh isi marquee akan terlihat, dan itu memang cukup mengganggu juga. Berikut beberapa atribut yang bisa digunakan untuk marquee agar terlihat lebih bagus dan cantik 
  • bgcolor : Atribut ini digunakan untuk mengatur background dari text yang akan diberi efek marquee.
  • direction : Digunakan untuk mengatur gerakan dari text tersebut (up, down, left right).
  • scrollamount : Untuk mengatur kecepatan dari gerakan text (angka dalam px), semakin tinggi angka yang digunakan, maka akan semakin cepat gerakan dari textnya.
  • behaviour : Untuk mengatur efek dari gerakannya (slide, scroll, alternate).
  • width : Untuk mengatur lebar dari area text nya (dinyatakan dalam px atau %).
  • height : Untuk mengatur tinggi dari area text nya (dinyatakan dalam px atau %).
  • align : Untuk mengatur posisi (center, left, right).
  • onmouseover : Untuk memberhentikan efek ketia disorot(hover) mouse.
  • onmouseout : Untuk melanjutkan efek bila mouse sudah tidak menyorot(hover) text.
Sebenarnya masih banyak atribut-atribut lain yang bisa anda gunakan, atribut diatas hanyalah atribut yang sering digunakan. Sekarang kita lihat contoh dari efek-efek marquee ini.

Contoh marquee dari kiri ke kanan  

<marquee direction="right" scrollamount="2"> Contoh Marquee dari kiri ke kanan </marquee>
Contoh Marquee dari kiri ke kanan

Contoh marquee dari kanan ke kiri 

<marquee direction="left" scrollamount="2"> Contoh Marquee dari kanan ke kiri </marquee>
Contoh Marquee dari kiri ke kanan

Contoh marquee dari atas ke bawah  

<marquee direction="down" scrollamount="2" height="100" width="50%"> Contoh Marquee dari atas ke bawah </marquee>
Contoh Marquee dari atas ke bawah

Contoh marquee dari bawah ke atas  

<marquee direction="up" scrollamount="2" height="100" width="50%"> Contoh Marquee dari bawah ke atas </marquee>
Contoh Marquee dari bawah ke atas

Contoh marquee dengan menggunakan background biru dan warna font putih  

<font color="white"><marquee direction="right" scrollamount="2" bgcolor="blue"> Contoh Marquee dengan menggunakan background biru dan warna font putih </font></marquee>
Contoh Marquee dengan menggunakan background biru dan warna font putih

Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot  

<marquee direction="down" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100"> Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot </marquee>
Contoh marquee berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot
Itulah beberapa contoh efek-efek marquee yang bisa anda gunakan, anda bisa berexplorasi lebih jauh lagi. Silahkan anda bereksperimen sendiri.
Selamat mencoba !

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Đăng nhận xét

Labels

Adult English affiliate Ảnh ẢNH FACEBOOK ẢNH HÀI ẢNH HOA ĐẸP ẢNH LÃNG MẠN ẢNH NGƯỜI MẪU ÁO DÀI Art + Design ẨM THỰC bag Bé tô màu BIKINI BLOGGER books Búp bê C CAPTCHA Cắm hoa Cắt may Chơi mà học CHUYỆN CỦA SAO Chuyện Lạ clip hot Coloring - Tô màu CUỘC SỐNG Doll domain DU LỊCH Đ Đan len Đất nặn cho bé Điện thoại - Tablet E Funny G GAME Gấp giấy Gấp hộp Gấp khăn - Trang trí món ăn Giầy - Dép Gifts Giới Tính GIỚI TRẺ NGÀY NAY Gói quà - gấp nơ Google GOOGLE ADSENSE FULL guest post H Hand made hat hiteach HOA HẬU HỌC TẬP home and garden hosting HOT GIRL INTERNET INTERNET PAYMENT Iseng joomla jQuery Kết hạt KHỎE & ĐẸP KIẾM TIỀN Kinh Nghiệm L LÀM ĐẸP Làm đồ chơi làm đồ chơi từ gỗ Làm hoa giấy Làm hoa vải Làm thiệp LƯU BÚT HỌC TRÒ M Magazine making flowers Mẫu móc MẸO HAY MMO MODEL N Nail art Nến trang trí Nghệ thuật NGƯỜI ĐẸP VÀ XE Nhà đẹp O Origrami Ôtô - xe máy P Painting - Vẽ Patchwork PHẦN MỀM Play and learn for baby plugin Q R recycling S Sách tiếng anh cho bé Sành điệu Sao SAO NGOẠI SAO ONLINE SAO VIỆT SEO SEO FULL slider STYLE T TÂM SỰ template Tết dây THẾ GIỚI NGƯỜI MẪU THẾ GIỚI THỨ 3 THỂ THAO Thêu THƠ TÌNH THỦ THUẬT THÚ VUI Thư giãn TIỂU THUYẾT TÌNH CẢM TIN HOT Tin Vip tips Tóc đẹp traffic TRANG ĐIỂM Trang trí Tri thức TRUYỆN NGẮN truyện quê Túi xinh tutorial blog VĂN PHÒNG vuivui808 weaving website WEDDING wordpress