mas template

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 !
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

38 comments:

  1. gimana cara daftar.. adchoices...di blog...??

    ReplyDelete
    Replies
    1. sekalian saya juga mau tanya nih, cara buat text yang berjalan seperti mengetik sendiri, untuk saya pasang di www.muslimahonline.net

      kodenya ada nggak di blog ini? namanya apa?

      Delete
  2. trimakasih tips nya gan :)
    mampir ya http://hades-exploit.blogspot.com

    ReplyDelete
  3. berguna banget tipsnya, mampir gan http://amburadoell.blogspot.com/ , tapi masih standar ya, masih anak bawang :D

    ReplyDelete
  4. mas kalau teks berjalannya berdasarkan random post bisa ngak ya.. terima kasih

    ReplyDelete
  5. makasih ya pak
    http://www.tourkarimunjawaisland.com/

    ReplyDelete
  6. makasih atas infonya

    http://arnida-herbal.blogspot.com/

    ReplyDelete
  7. makasih infonya

    http://idekerjaonline.blogspot.com/

    ReplyDelete
  8. manta coy triknya
    http://www.obatkuatherball.com/

    ReplyDelete
  9. Kunjungi : http://AR-Respect.blogspot.com :)
    itu contohnya gan

    ReplyDelete
  10. Mas mau tanya bagaimana cara buat tek marquee dalam gambar header.?

    Terima kasih

    ReplyDelete
  11. thx sangat bermanfaat gan
    visit : www.warungmagelangs.blogspot.com

    ReplyDelete
  12. info lumayan membantu.thx ya
    htttp://www.kepri.info

    ReplyDelete
  13. keren tutorialnya mas

    http://blogziip.blogspot.com

    ReplyDelete
  14. Informasinya sungguh luar biasa banget bang saya sangat menyukai artikel-artikel pada blog sobat.

    ReplyDelete
  15. Informasinya sungguh luar biasa banget bang saya sangat menyukai artikel-artikel pada blog sobat.

    salam dARi http://ahmadsuyadi.blogspot.com/

    ReplyDelete
  16. artikelnya mantap sob..akan saya coba..
    terimakasih sob..!!

    ReplyDelete
  17. artikelnya mantap sob..akan saya coba..
    terimakasih sob..!!

    ReplyDelete
  18. keren gan infonya
    http://www.blogkevinws.blogspot.com

    ReplyDelete
  19. thanks banget gann buat infonya
    salam
    by : www.orbit.co.id

    ReplyDelete
  20. hihi ketemu jg disini,thanks sob
    www.duniagame.info

    ReplyDelete
  21. terus kembangkan ilmunya ya semoga manfaat. trims

    ReplyDelete
  22. Waah... saya sudah berjam-jam nyari caranya. akhirnya ketemu juga, bahkan ga usah pakai plugin.
    Cukup pakai kode Marquee, makasih banyak atas informasinya. Ijin menggunakan ya :)

    ReplyDelete
  23. Terima kasih informasinya mas kolis, tapi kenapa ya dari beberapa blog yang membahas materi ini, kok yang onmouse tidak bekerja dengan baik..?

    ReplyDelete
  24. ijin nyoba mas bro, saya sangat tertarik dengan artikel ini,

    kalo ada waktu kunjung balik mas bro
    http://muba-sky.blogspot.com/
    terimakasih

    ReplyDelete


  25. thanx ya gan atas info nya semoga sukses selalu blog nya gan :)
    dan sukses selalu gan info nya :)

    PROMOSI
    HOT PROMO DARI RAJAPOKER88 di

    http://www.rajapoker88.com/?ref=577053


    Untuk member setia rajapoker88 dapatkan bonus referal dari kami sebesar 10% dari kemenangan teman Referal anda dan dapatkan juga 10 POINT setiap turn over 1 juta rupiah point ini akan di undi setiap 1 minggu sekali

    peringatan: untuk bonus selalu di bagikan setiap hari senin
    dan untuk batas mengklaim bonus setiap hari minggu selama 7 hari
    jika batas mengklaim bonus lewat dari seminggu maka bonus dinyatakan hangus!!

    keterangan lebih lanjut untuk mengklaim bonus silakan hubungi :
    YM: afb88_cs1@yahoo.com
    YM: idr.afb88@yahoo.com
    pin bb : 2257e32b

    segera bergabung dengan kami dan kumpulkan pointnya.
    Terima Kasih.

    Permainan yang kami sediakan yaitu :
    * Poker
    * Tangkas
    * Domino99

    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK BRI, BANK MANDIRI, DAN BANK DANAMON.

    Untuk keterangan lebih lanjut, silahkan Hubungi kami di :
    * WWW.RAJAPOKER88.COM (pingbox)
    * TWITTER : @RAJAPOKER88
    * YM : RAJAPOKER88.indo
    * PIN BB : 75CB33AF
    * PHONE NUM : (+84) 169 859 6613
    * SKYPE : RajaPoker88

    Terima Kasih,
    Salam Rajapoker88.com

    ReplyDelete
  26. Terima Kasih atas ilmunya
    sudah tak terapkan
    http://www.rumahukir.com/

    ReplyDelete
  27. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  28. Teman - teman kesulitan untuk Belajar Komputer karena kesibukan? kini kami memfasilitasi kursus komputer jarak jauh via online, silahkan kunjungi website kami di asianbrilliant.com, Master Komputer, Kursus Online

    Ayah, Bunda..butuh guru untuk mengajar anak-anak dirumah ? kami memfasilitasi 1000 guru untuk anak-anak ayah dan bunda datang kerumah, silahkan kunjungi website kami di smartsukses.com, Bimbingan Belajar, Les Private

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger