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 :
Hasil :
Hasil :
Ini adalah contoh teks Marquee Slide-in Text
Hasil :
Hasil :
Hasil :
Hasil :
Kode :
Hasil :
Terdapat beberapa poin yang harus saya jelaskan sedikit mengenai contoh kode - kode diatas.
Nah setelah kalian mengetahui kode yang digunakan untuk membuat fungsi Marquee, sekarang saatnya dipraktekkan di blog masing - masing.
Happy sharing - Happy Blogging ^_^
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 :
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uYug6XTR8ETzxf1FHQNBKGQ6UPfhZkUVFMdBmYVagV7hP5M6EisrCfrDS6WbCCZgC2ha01ExPkmsu1KtF9Wx6WAWpPStovFA7S5mPlJcYdBwtyrf1t-dd6fcoCVj4-7p_RUWADv38kBb/s1600/Marquee+Code.jpg)
Macam - Macam Marquee :
- Standart Marquee :
<marquee>Ini adalah contoh teks Marquee biasa</marquee>
Hasil :
- Slide-in Text :
<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 :
<marquee behavior="scroll" direction="left">Ini adalah contoh Marquee Conrinuous Scrolling Text</marquee>
Hasil :
- Text Bouncing Back and Forth :
<marquee behavior="alternate">Ini adalah contoh Marquee Bouncing Back and Forth</marquee>
Hasil :
- Text Scrolling Upwards :
<marquee behavior="scroll" direction="up">Ini adalah contoh Marquee Text Scrolling Upwards</marquee>
Hasil :
- Change the Scrolling Speed :
<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 :
- 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 :
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 ^_^
weeeww....sangat membantu sekali gaaan....langsung saya praktikkan...terima kasih :)
ReplyDelete