Dasar Membuat Text Berjalan (Marquee)

: 23.20 10 comments

marquee effect
M
asih seputar memperindah tampilan sebuah template/Website ,kali ini Full Blog Design |Kumpulan Tutorial akan berbagi cara membuat tampilan text pada sebuah blog/website menjadi berfariasi/menjadi lebih indah .Nah dalam hal ini kita akan membuat /memodifikasi sebuah teks yang awalnya diam menjadi bisa bergerak/berjalan,dalam hal ini bisa berfungsi jika kita memberikan effect Marquee pada text tersebut kode sederhana/dasarnya seperti ini : <marquee>isi kalimat disini</marquee> Jika kode disamping ini kita letakkan dalam postingan dalam bentuk Html kode ini akan berfungsi menjadi seperti di bawah ini .
isi kalimat disini
Setelah kita mempelajari Dasar Membuat Text Berjalan (Marquee) sekarang kita akan mengembangkan kode (marquee) tersebut menjadi lebih keren sehingga baik fungsi ataupun tampilan nya menjadi lebih  baik ,berikut adalah atribut-atribut yang disertakan pada kode Marquee tsb :
  1. bgcolor         :  Atribut ini mengatur warna pada background yang diberi effect   marquee.
  2. scrollamount  :  Mengatur kecepatan gerak dari text(semakin tinggi semakin cepat)
  3. direction        :  Mengatur gerakan text (down,up,left,right)
  4. behavior      :  Memberika effect pada gerakan text (slide, scroll, alternate)
  5. width             :  Mengatur lebar area text
  6. height             :  Mengatur tinggi area text
  7. align               :  Untuk mengatur posisi text (center,left,right)
  8. onmouseover  :  Memberikan effect berhenti saat cursor menyentuh area text( this.stop() )
  9. onmouseout    :  Memberikan effect berjalan  saat cursor meninggal kan area text ( this.start())
Setelah mengetahui atributnya mari kita berexperiment dengan meletakkan kode kode tersebut pada kode area marquee satu per satu :
  1. bgcolor == Untuk memngatur background pada area marquee
  2. <marquee bgcolor="red">Isi Text nya</marquee>
    Isi Text nya
  3. scrollamount == mengatur kecepatan text marquee (kecepatan semakin tinggi semakin cepat)
  4. <marquee scrollamount="20">Isi Text nya</marquee>
    Isi Text nya
  5. direction == mengatur gerakan text marquee (down,up,left,right)
  6. <marquee direction="down">Textnya Disini</marquee>
    Textnya Disini
    <marquee direction="up">Textnya Disini</marquee>
    Textnya Disini
  7. behaviour == memberikan effect pada gerakan text marquee (slide, scroll, alternate)
  8. <marquee behavior="alternate"> Tulisan sobat disini</marquee>
    Tulisan sobat disini
  9. onmouseover dan onmouseout == effect berhenti saat mouse menyentuh area Marquee
  10. <marquee onmouseover=" this.stop()" onmouseout="this.start()"> Tulisan sobat disini</marquee>
    Tulisan sobat disini
Kode Marquee ini bisa sobat terapkan juga pada widget widget tertentu Recent Post ,Resent comment dll. Tapi saya sarankan sobat untuk menggunakan fungsi onmouseover dan onmouseout pada marquee tsb. sehinnga saat widget berjalan bisa berhenti saat pengunjung akan mengklik link tujuan  mari lakukan experimet dengan menyertakan Gambar...(pacar saya) :
Gunakakan Kode ini : arahkan kursor ke gambar untuk melihat effect

<marquee onmouseover=" this.stop()" onmouseout="this.start()"><img src="https://lh3.googleusercontent.com/-miKf-Muxvdk/UVgl1nyqTYI/AAAAAAAABYM/GYjoRybMMxM/s251/karina.jpg"title="Karina Kapoor Pacar Mas Mahfid"alt="karina kapoor"width="150 "height="150"></marquee>
karina kapoor


photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Dasar Membuat Text Berjalan (Marquee) Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih

10 komentar

Stiker Jalingkut delete 1 April 2013 pukul 12.23

oh jdi begitu'y mas bro dasar2 tex berjalan. juga dasar2 cara bikin kopi enak xixixixi

zigzoor delete 1 April 2013 pukul 20.22

wah komplit ya,ternyata marquee anyak juga macamnya ya.terima kasih sobsudah berbagi,oh ya kita saling follow yuk.

Unknown delete 1 April 2013 pukul 20.44

Thanks sob ...ok langsung ke Tkp

Kang mahfid memang jago'nya dah kalau soal edit efek blog.. hehehe.. mantap kang..

Unknown delete 1 April 2013 pukul 20.55

Thanks Bank Andy pingin nya saya isi tutorial photoshop juga ...tapi belum bisa edit foto ..masih banyak belajar ama Bank Andy

Anisayu Nastutik delete 1 April 2013 pukul 22.10

tampak unik dan cantik ya kalau textnya bergerak jalan ...

Unknown delete 1 April 2013 pukul 22.18

Terima Kasih motifasinya ... ^_^

Unknown delete 1 April 2013 pukul 22.38

Summppaahh baru tau, kirain cuman utk text berjalan aja.. gak taunya bisa utk gambar berjalan thoo.. makasih infonya sob

Unknown delete 1 April 2013 pukul 22.43

Betul sekali sob bahkan bisa buat widget juga ...thanks sob motifasinya

Unknown delete 29 Mei 2013 pukul 05.45

Bagus gan..thank.
Bermanfaat.

http://owlscript.zz.mu/

Kunjungi y gan.ini komunitas programer..dsitu kita bisa tanya jawab mslh program.. :-D

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>