Cara Membuat Image/Teks Slide Show Dengan Berbagai Efek marquee

Pernahkah anda mengunjungi suatu blog atau website yang pada halaman Blog ataupun website mereka terdapat tampilan image slide show. salah satu contohnya bisa anda lihat image slide show yang ada pada bagian atas blog saya ini.

Sekarang pertanyaannya adalah bagaimana caranya kita membuat image slideshow tersebut?

Untuk membuat image slideshow tersebut caranya tidaklah begitu susah, pada postingan kali ini saya akan menjelaskan bagaimana cara kita untuk membuatnya. tapi sebelum ke inti pembuatannya, ada baiknya bila kita memahaminya terlebih dulu tentang efek marquee.

Marquee adalah kode HTML yang befungsi untuk membuat object seperti gambar ataupun teks menja bergerak atau berjalan. Ada beberapa efek marquee yang bisa kita buat seperti: gambar/teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai ke tahap pembuatan, mari kita pelajari dulu fungsi dari masing-masing atributes tersebut.

Beberapa attributes yang sering digunakan dalam marquee yaitu sebagai berikut :

1. Behavior : yaitu untuk mengatur gaya gerakan pada gambar taupun teks. biasanya ada 3 gaya gerakan yang bisa digunakan yaitu :

•  Alternate : yaitu untuk menggerakan gambar atau teks secara bolak-balik
•  Slide        : yaitu untuk menggerakan gambar atau teks berjalan ke satu arah sekali saja
•  Scroll       : yaitu untuk menggerakan gambar atau teks ke satu arah secara kontinu
  

2. Direction : yaitu untuk mengatur arah gerakan gambar ataupun teks.biasanya ada 4 arah gerakan yang bisa kita digunakan yaitu :

• Up      : Untuk menggerakan gambar atau teks bergerak keatas
• Down  : Untuk menggerakan gambar atau teks bergerak kebawah
• Left    : Untuk menggerakan gambar atau teks bergerak kekiri
• Right  : Untuk menggerakan gambar atau teks bergerak kekanan
  

4. Face : Untuk mengatur jenis font / teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda.

5. Width : Untuk mengatur ukuran panjang atau Lebar ruangan gambar/teks dalam satuan pixel.

6. Height : Untuk mengatur ukuran Tinggi  ruangan gambar/teks dalam satuan pixel

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background anda gunakan"transparent"

8. Scrolldelay : Untuk mengatur ukuran waktu tunda gerakan dalam satuan per mili detik


9. Scrollamount : Untuk mengatur ukuran kecepatan gerakan dalam satuan pixel.

10. Loop : untuk mengatur ukuran jumlah pengulangan.

Itulah beberapa attributes yang sering digunakan untuk membuat efek marquee atau untuk membuat gambar atau teks berjalan. Berikut ini saya akan memberikan beberapa contoh efek dari marquee:

Contoh 1: Gambar atau teks berjalan bolak-balik secara horizontal

Welcome To My Blog

Kodenya adalah :
Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">
<marquee behavior="alternate" bgcolor="yellow" direction="right" height="20px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="right" height="100px" scrollamount="5" scrolldelay="10" transparent="" width="300px">
<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Catatan : Semua teks yang dicetak tebal dengan warna merah di atas bisa anda ganti sesuai dengan yang anda inginkan, dan untuk menambah gambar pada image slide show anda cukup mengcopy kode
<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /> dan pastekan sebelum kode </marquee>.

Masukan Link anda disini : yaitu Link yang anda inginkan jadi ketika gambar itu di klik akan terbuka sebuah alamat yang dituju, misalnya link posting anda,blog atau yang lainnya. kalau dirasa tidak perlu, tidak dirubah atau di hapus juga tidak apa-apa.

Masukan Link gambar anda disini: yaitu Link gambar dari image hosting anda.

Contoh 2: Gambar atau teks berjalan kekanan secara continue

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="scroll" bgcolor="yellow" direction="right" height="20px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="scroll" bgcolor="" direction="right" height="100px" scrollamount="5" scrolldelay="10" transparent="" width="300px">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Contoh 3: Gambar atau teks berjalan bolak-balik secara vertikal:

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="alternate" bgcolor="yellow" direction="up" height="100px" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="up" height="300px" scrollamount="5" scrolldelay="10" transparent="" width="100px">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Contoh 4: Gambar atau teks berjalan dengan efek bounce atau zig zag

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="alternate" bgcolor="yellow" direction="up" height="100px" scrollamount="5" scrolldelay="10" width="300px"><marquee behavior="alternate" direction="left" scrollamount="5" scrolldelay="10">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="up" height="300px" scrollamount="5" scrolldelay="10" transparent="" width="100px"><marquee behavior="alternate" direction="left" scrollamount="5" scrolldelay="10">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Contoh 4: Gambar atau teks berjalan dan berhenti dengan mouse

Welcome To My Blog

Kodenya adalah :

Untuk Teks  Slideshow:

<span style="color: black; font-family: arial; font-size: medium;">

<marquee behavior="alternate" bgcolor="yellow" direction="right" height="20px" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" scrolldelay="10" width="300px">Welcome To My Blog</marquee></span>

Untuk Image slideshow :

<marquee behavior="alternate" bgcolor="" direction="right" height="100px" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" scrolldelay="10" transparent="" width="300px">

<a href="Masukan Link anda disini"><img alt="" height="100" src="Masukan Link gambar anda disini" width="133" /></a></marquee>

Gambar ataupun teks pada slideshow diatas akan berhenti bila mouse anda digerakan tepat diatasnya dan akan berjalan kembali bila mouse anda digerakan menjauhi slideshow tersebut.

Ok, mungkin hanya beberapa contoh saja yang bisa saya berikan pada postingan kali ini. silahkan anda paraktekkan contoh yang saya berikan tersebut pada gadget HTML page element anda. mohon maaf bila ada kekurangan dalam postingan saya kali ini. semoga bermanfaat dan salam blogger mania.