Selasa, 05 Oktober 2010

Macam-macam Efek Tulisan Berjalan Dengan Marque

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:

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

Maka hasilnya:


contoh tulisan dibawah gambar

NB:
  • Angka 50 adalah tinggi gambar
  • Angka 80 adalah lebar gambar
  • http://1.bp.blogspot.com/_zPGFb65OgB8/S-mO-XqMC3I/AAAAAAAABqk/Ou10ruJ6Cv0/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:

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

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:

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:

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 :))


25 komentar:

  1. halo sob, baru saja aku terbitkan postingan. dalam postingan tersebut, saya me-link ke Artikel ini, Silahkan klik di sini untuk melihatnya

    BalasHapus
  2. @Soe86 (Perpustakaan Antropologi): oh, silahkan! Dengan senang hati.

    @Statusfb.com: sam2 bro.. Tetap semangat & keep blogging :)

    BalasHapus
  3. Mantap gan Artikelnya..
    Mo di coba ah.....

    BalasHapus
  4. Bagus nih untuk mempercantik blog.Trims ya

    BalasHapus
  5. baru ya bang blognya :)

    keren euyy

    nanti saya rajin2 mampir ke sini :)

    BalasHapus
  6. @Admin yups... ini blog coba2 :)
    Masih bagusan blogmu lah. Hehe

    BalasHapus
  7. nice post...^^

    *mampir jg ya d blog ku...

    BalasHapus
  8. MANTAP OMMM CEK TISS OUT http://trisnaponselplus.co.cc/

    BalasHapus
  9. gimana dengan marque yang selelu terlihat di bagian bawah browser.?
    Hot link..!!

    BalasHapus
  10. @Hanafi Milan Multimedia
    selama itu masih seputaran blog dan bisa disisipi Javascript bisa saja gan pake cara2 seperti diatas...

    BalasHapus
  11. Kalo ketemu ma div ga bisa ya mas...??

    BalasHapus
  12. @Vande Soul
    Bisa kok mas, masalahnya apakah style marque yg kita buat membutuhkan div apa tidak.
    Tag div biasanya dibutuhkan agar sifat marque berefek pada semua fariable yg dilingkupi tag div.
    Hehee, saya juga masih belajar nih mas :)

    BalasHapus
  13. ok jg.................,,,,,,,,,,,,,

    BalasHapus
  14. asli keren... cuma sayang.. gk biasa masangnya... hehe

    BalasHapus
  15. Wah..bagus-bagus

    saya suka

    tolong kunjungi blog saya yah...

    biar saya punya alamt link blog ini dengan cara anda meninggalkan Komentar

    itu saja,

    Terima Kasih

    BalasHapus
  16. Komentar ini telah dihapus oleh penulis.

    BalasHapus
  17. makasih atas tipsnya....salam kenal ya buat semuanya
    http://anfilem.blogspot.com/

    BalasHapus
  18. info yang bagus buat saya yang lagi jual baju gamis.
    terima kasih .. :D

    BalasHapus

Terimakasih^^