Cara membuat Teks Berjalan (Marquee)

Marquee

Sebelumnya saya sudah menjelaskan tentang Cara Menambahkan Scroll Pada Widget Blog untuk menghemat sebuah widget dan sekarang saya akan membagikan tutorialnya yaitu  teks berjalan atau bergerak yang biasa disebut Marquee.

Mungkin bagi anda banyak yang sudah tentang marquee tapi mungkin masih ada yang belum tahu untuk kode bagaimana cara membuat efek berjalan ini. Berikut atribut yang sering digunakan pada efek teks berjalan ini agar terlihat lebih menarik dan indah :)
  • 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.
Untuk Caranya sekarang lihat contoh efek teks berjalan ini.

Contoh Berjalan dari kekiri ke kanan
<marquee direction="right" scrollamount="2">Contoh Berjalan dari kekiri ke kanan </marquee>

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

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

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

Contoh Teks Berjalan dengan background warna hijau dan font putih
<font color="white"><marquee direction="right" scrollamount="2" bgcolor="green"> Contoh Teks Berjalan dengan background hijau dan font putih</font></marquee>
Contoh Teks Berjalan dengan background hijau dan font putih
Contoh Teks berjalan 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 Teks berjalan &nbsp;berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot </marquee>

Contoh Teks berjalan  berhenti bergerak ketika di sorot mouse dan bergerak kembali ketika sudah tidak di sorot

Mungkin hanya itu yang bisa saya sampaikan kurang lebihnya saya minta maaf . terima kasih dan semoga bermanfaat.

Anda bisa gunakan pada widget sidebar,Post Popular dan lainnya. Kreasikan anda sendiri ^_^

47 Responses to Cara membuat Teks Berjalan (Marquee)

  1. justru naksir ma itu sob fitur Join This Site, kalau ada tutor bagi dong :D hehehehe, maaf sob OOT

    ReplyDelete
    Replies
    1. yang mana kang,, di samping itu? saya cuma masukin link gambar dan url buat join blog saja..

      Delete
    2. oh gitu ya, saya coba dulu ya kang, saya gk kepikiran sampai kesitu :D, ada link gambarnya gk kang...??? :D

      Delete
    3. tinggal pakai kode gambar sja kang <marquee direction="down" scrollamount="2" height="100" width="50%"> <img src="linkgambar"/></marquee>

      Delete
    4. link gambarnya sory yah http://4.bp.blogspot.com/-a409Bq2T2bE/UmvRU1JEMiI/AAAAAAAAaWA/IdJz0L5Yv2g/s1600/Follow+my+blog.gif

      Delete
    5. Namun sayang marquee sudah tidak valid HTML5, tetapi penggunaannya bisa diganti dengan CSS3 Keyframes. :)

      Delete
    6. iya bener mas,, kalau css3 saya kurang begitu paham :)

      Delete
  2. Wah baru tau cara nya nih mas
    Asyik juga kalo buat bw di guestbook sahabat :)

    ReplyDelete
    Replies
    1. iya mas.. buat link exchange juga lebih simple =D

      Delete
  3. baru tau ada yang ber background marquenya

    ReplyDelete
  4. Kunjungan perdana dari pemilik Goresan Kecilku, semoga bermula dari ini, kedepanya mampu menjalin persahabatan yang lebih kuat :D
    Salam Sukses

    ReplyDelete
    Replies
    1. amin.. makasih kang dadang.. salam kembali :)

      Delete
  5. Mas ini bisa dipraktekin dari hp ya..dan apa ini tidak mempengaruhi berat blog

    ReplyDelete
    Replies
    1. bisa jenx,, saya tidak punya HP sebagus punya Jenx indah =D

      Delete
  6. wah, boleh juga nih kalau ndak berat...

    ReplyDelete
    Replies
    1. tergantung koneksi internet Sist Etika :)

      Delete
  7. unik juga ya tampilan teksnya bisa jalan-jalan sendiri

    ReplyDelete
    Replies
    1. iya ,, seperti Sist Dewi juga bisa jalan sendiri =D

      Delete
  8. Wihh mantab kang ... mungkin nanti saya butuh nih tutorial nya ...
    Tertarik sih mau pasang , tapi bingung mau di gunain buat apa dan di tempatkan nya dimana :(

    Bookmark dulu ajah deh ... thanks for sharing kang :D

    ReplyDelete
    Replies
    1. bisa buat Link exchange di sidebar,, hehe di tunggu kreasinya kang Felix ^_^

      Delete
  9. heheeh keren juga ya kalau tulisan berjalan mas :)

    ReplyDelete
  10. wah asyik juga ya kalau tulisan bisa jalan-jalan getu. jadi blog nya ada seni nya ya :)

    ReplyDelete
  11. Hmmm woooww itu yang ada begrounya aku tertarik

    ReplyDelete
  12. Keren mas .. saya nyoba ah maklum newbie sih .. makasih mas

    ReplyDelete
    Replies
    1. sama2 kang Ruly,, saya juga masih belajar nih ^_^

      Delete
  13. Wahh belum ada ide lagi nih kang buat bikin post ?? hehehe :D
    di tunggu deh artikel terbaru nya ... ^_^

    ReplyDelete
  14. keren sekali gan...nanti ane coba

    makasih tutornya sob...

    ReplyDelete
    Replies
    1. sama2 mas, oiya pocongnya bagus warnaa warni =D

      Delete
  15. ijin coba sob, soalnya ane bloger pemula , n jangan lupa kunbalnya sob di blog ane, riuken jogang

    ReplyDelete
  16. Tambah OK deh Blog aqu Mas, Makasih deh

    ReplyDelete
    Replies
    1. terima kasih kembali, salam kenal pak :)

      Delete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔