Macam - Macam Marquee Dan Cara Membuatnya

Marquee atau teks berjalan merupakan salah satu variasi HTML yang bisa kita terapkan juga pada blog dengan mesin Blogspot.
Dengan kode Marquee ini kita bisa menghias Blog dengan menampilkan object (teks/gambar) yang bisa bergerak layaknya animasi.
Perlu kita ketahui, terdapat beberapa macam efek Marquee pada HTML yang bisa kita terapkan di blog.
Nah, dibawah ini adalah tulisan macam - macam contoh Marquee beserta kode HTML yang digunakan :


Macam - Macam Marquee :
  • Standart Marquee :
Kode :
<marquee>Ini adalah contoh teks Marquee biasa</marquee>

Hasil : Ini adalah contoh teks Marquee biasa

  • Slide-in Text :
Kode :
<marquee behavior="slide" direction="left">Ini adalah contoh teks Marquee Slide-in Text</marquee>

Hasil : 
Ini adalah contoh teks Marquee Slide-in Text
  • Continuous Scrolling Text : 
Kode :
<marquee behavior="scroll" direction="left">Ini adalah contoh Marquee Conrinuous Scrolling Text</marquee>

Hasil :
Ini adalah contoh Marquee Conrinuous Scrolling Text
  • Text Bouncing Back and Forth :
Kode :
<marquee behavior="alternate">Ini adalah contoh Marquee Bouncing Back and Forth</marquee>

Hasil :
Ini adalah contoh Marquee Bouncing Back and Forth
  • Text Scrolling Upwards :
Kode :
<marquee  behavior="scroll" direction="up">Ini adalah contoh Marquee Text Scrolling Upwards</marquee>

Hasil :
Ini adalah contoh Marquee Text Scrolling Upwards
  • Change the Scrolling Speed :
Kode :
<marquee behavior="scroll" direction="left" scrollamount="1">Contoh 1 => Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Contoh 2 => Medium scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Contoh 3 => Fast scroll speed</marquee>

Hasil : Contoh 1 => Slow scroll speed Contoh 2 => Medium scroll speed Conroh 3 => Fast scroll speed

  • Scrolling Images :

Kode :
<marquee behavior="scroll" direction="left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyQRPuudIAaLabpReSNQrGcbB-sJDPYNiCIgmW9m3FHIqWPNA282Z4lLy8NHrcQpzYcIAtLWYUtf_7VMiLrtaFgROlUOXYXCk4UsvYT2FDuWwVWFIub3lsxLRKMqsSu_SIbDmkAkl_cqu/s1600/smileys_001_01.png" width="100" height="100" alt="smile" /></marquee>

Hasil :

smile


Terdapat beberapa poin yang harus saya jelaskan sedikit mengenai contoh kode - kode diatas.
  •  Kode yang saya beri tanda warna merah adalah kode yang digunakan untuk mengatur teks object mana yang ingin dibuat efek Marquee
  • Untuk teks bisa kamu ganti sesuai keinginginan
  • Untuk beberapa kode CSS-nya juga bisa kamu otak-atik sendiri
  • Warna biru pada fungsi "Scrolling Image" silahkan diganti dengan URL gambar kamu

Nah setelah kalian mengetahui kode yang digunakan untuk membuat fungsi Marquee, sekarang saatnya dipraktekkan di blog masing - masing. 
Happy sharing - Happy Blogging  ^_^

Ceritakan ini di :

Facebook Google+ Twitter Digg

Tentang Penulis :

Ansory Esce
Dia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+

1 Komentar untuk "Macam - Macam Marquee Dan Cara Membuatnya"

  1. weeeww....sangat membantu sekali gaaan....langsung saya praktikkan...terima kasih :)

    ReplyDelete