Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Marquee

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag <marquee>…</marquee>.

Atribut yang sering di gunakan adalah :

BGCOLOR=”warna” –> Untuk mengatur warna background (latar belakang) teks

DIRECTION=”left/right/up/down” –> Mengatur arah gerakan teks

BEHAVIOR=”scroll/slide/alternate” –> Untuk mengatur perilaku gerakan

Scroll –> teks bergerak berputar
Slide–> teks bergerak sekali lalu berhenti
Alternate –> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE=’pesan” –> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT=”angka” –> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY=”angka” –> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP=”angka|-1|infinite” –> Mengatur jumlah loop

WIDTH=”lebar” –> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right"
height="200" scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :

marquee dari kanan ke kiri

ganti kata “left” dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center"
direction="left" height="200" scrollamount="3"
width="70%" behavior="alternate">

marquee menurut perilaku

</MARQUEE>

marquee menurut perilaku

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

</MARQUEE></b></FONT></div>

hasilnya :

marquee dengan variasi hurup

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini

</marquee>

hasilnya :

silahkan tunjuk ke sini

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

hasilnya :

Rubrik Elektronik

Electronic Rubric

Kolom iklan

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Selamat ber eksperimen

Ingin pintar dalam bahasa HTML, silahkan download ebook nya di sini
Ingin pintar membuat website sendiri, silahkan klik di sini

Iklan

29 April 2007 - Posted by | blog tutorial, membuat marquee

26 Komentar »

  1. mas,,,rohman.nambahin marque na dmn?,blog aku type new template,,,makasih

    Komentar oleh Teguh Widodo [ 12062268 ] | 4 Juni 2007 | Balas

  2. Sobat teguh, caranya begini :
    Sign In,klik Layout,klik Page Elements,klik Add a Page element,klik ADD TO BLOG yang ada dibawah tulisan
    HTML/JavaScript,trus masukan kode marquee nya, Save deh.
    udah selesai. Selamat mencoba.Eh ngomong2 ko ga ninggalin jejak,jadi saya ga bisa liat blognya si mas yg mana.

    Komentar oleh rohman | 4 Juni 2007 | Balas

  3. thanks. udah bantu saya lagi… lihat headline news metrotv jadi lebih menarik untuk dilihat….. thanks ya

    Komentar oleh PraYogiE | 10 Juni 2007 | Balas

  4. mas Rohman, saya udah nyoba coba lihat di blog saya (tintinsnotes.blogspot.com), tapi kok ndak jalan ya ?

    Komentar oleh T i n T i n | 13 Agustus 2007 | Balas

  5. Oh, maaf mas, bisa jalan kok, tapi kalo pake Internet Explorer, kalo pake Mozila nggak mau, kenapa ya ?

    Komentar oleh T i n T i n | 13 Agustus 2007 | Balas

  6. iya nih saya juga dah coba bikin, pake IE sih jalan, tp ko pake mozila ga jalan ya…? padahal saya lebih sering pake mozila buat browsing…

    Komentar oleh shadut | 27 Agustus 2007 | Balas

  7. Sobat Tin Tin & sobat Shadut, untuk marquee sudah saya bahas pada artikel ini bahwa marquee tidak terlalu di mengerti oleh fire fox, tapi jika tetap tetap ingin berjalan di kedua browser ini kita bisa memakai javascript, nanti deh saya buatkan tutorialnya. di tunggu saja ya !!!

    Komentar oleh rohman | 27 Agustus 2007 | Balas

  8. Website bagus, cocok utk pemula……

    Komentar oleh William "Adam" Rose | 5 Oktober 2007 | Balas

  9. saya paling fanatik dalam hal terbaru misalnya dalam blogspot ini, tetapi yang saya ingin tanyakan disini bagaimana cara kita mengubah tampilan suatu bacground atau templat kita dengan menggunakan foto kita sendiri?

    Komentar oleh zimy portnoy | 5 Oktober 2007 | Balas

  10. kok ngak muncul ya…marquenya setelah aku coy code dikolom html blog saya….cara naruh teks isinya dimana didalam kode itu…

    Komentar oleh redy | 10 Oktober 2007 | Balas

  11. Bagus artikelnya, kebetulan saya baru mau belajar ngeBlog nih. Makasih mas

    Komentar oleh women | 2 November 2007 | Balas

  12. Mas Rohman , u/ template clasic nambahin marque nya dimana ?

    Komentar oleh Iwan Bastian | 5 November 2007 | Balas

  13. kalo untuk yang klasik agak sulit menentukannya, bukannya pengguna template klasik lebih akrab dengan kode HTML…. hehehe…otak-atik aja.. ntar juga keteme deh

    Komentar oleh rohman | 5 November 2007 | Balas

  14. mas, gimana caranya uploadm file flash yang typenya swf kedalam blog sebagai headernya.

    satu lagi ya mas, gimana caranya link ke file excell dari blog kita

    makasih…

    Komentar oleh Gent Xeost 4 Ever | 12 Desember 2007 | Balas

  15. Bagaimana caranya menampilkan animasi gif di blog blogger

    Komentar oleh Teddy | 15 Desember 2007 | Balas

  16. @teddy : jika formatnya gif, cara nampilinnya ya sama seperti gambar bisa pada umumnya.

    Komentar oleh rohman | 15 Desember 2007 | Balas

  17. http://senthemania.blogspot.com/2007_12_01_archive.html

    Komentar oleh it's me | 24 Desember 2007 | Balas

  18. Mas Thanks website ini banyak menolong pemula yang sedang buat website, sy add web mas di link pembaca di http://www.pkp-pdp-dki-jakarta.blogspot.com thxs

    Komentar oleh Zulkifli Nasution | 28 Desember 2007 | Balas

  19. Mas Rohman… salam kenal ?
    Mas langsung the point aja yach ?
    Akunya ada pertanyaan nih buat Mas Rohman, bagaimana bikin menu diblogger ?

    salam,

    Komentar oleh Hadriyannadi | 31 Desember 2007 | Balas

  20. thank’s mas..!

    Komentar oleh ihsan | 1 Januari 2008 | Balas

  21. mas gimana cara edit nya di html, saya dah coba tapi gagal terus nikh. makasikh

    Komentar oleh mamem | 2 Januari 2008 | Balas

  22. Asl..thanks banget kang Rohman, moga ilmunya Berkah, d dibalas oleh Allah.amin

    Komentar oleh alf | 15 Januari 2008 | Balas

  23. Salam kenal mas…
    Saya rubah jenis font kok gk bs ya.
    terus ukuran font gmn ngubahnya.tks

    Komentar oleh HERY A.S | 22 Januari 2008 | Balas

  24. Kang Rahman, aku baru blajar bikin blog. Maunya seh pingin seperti kang Rahman, canggih banget. Aku dah coba bikin Marquee, tapi di IE mau jalan tapi di Mozilla gak mau jalan. Gimana dong sulusinya. Tolooong…

    Komentar oleh Muha Solo | 7 Februari 2008 | Balas

  25. Wah makasih, artikel ini bermanfaat buat saya. Udah aku praktekin di blogku. KEREEEEEEENNNN 🙂

    Komentar oleh tripujono | 24 Februari 2008 | Balas

  26. TOP TENAN !

    Komentar oleh Tri | 24 Februari 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: