May 29, 2008

Kod HTML Untuk "Scrolling Text" (Marquee)

Pos kali ini menerangkan bagaimana cara untuk menyediakan kod HTML bagi scrolling text (juga dipanggil marquee) dan boleh dimasukkan ke dalam sidebar, pos blog atau lain-lain.

Pergerakan Scrolling text ini boleh dijadikan sebagai satu daya tarikan kepada pengunjung blog anda asal tidak dibuat berlebihan sekiranya blog anda menyediakan banyak teks tulisan yang panjang lebar. Dibuat ala kadar sebagai satu bentuk hiasan jangan sampai mengganggu daya tumpuan pengunjung blog anda untuk membaca.

Jadi, untuk menyediakan scrollong text atau marquee ini cara mudahnya adalah seperti berikut:

Contoh kod mudah 'scrolling text' bergerak dari kanan ke kiri:

<marquee behavior="scroll" direction="left">Kod untuk scrolling text</marquee>

Kod untuk scrolling text

Kod untuk bergerak secara lantunan:

<marquee behavior="alternate">Kod untuk scrolling text</marquee>

Kod untuk scrolling text

Contoh kod 'scrolling text' bergerak dari bawah ke atas:

<marquee behavior="scroll" direction="up">Kod untuk scrolling text</marquee>

Kod untuk scrolling text

Contoh kod untuk mengawal kelajuan 'scrolling text':

<marquee behavior="scroll" direction="left" scrollamount="1">Perlahan - Kod untuk scrolling text</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Sederhana - Kod untuk scrolling text</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Laju - Kod untuk scrolling text</marquee>

Perlahan - Kod untuk scrolling text
Sederhana - Kod untuk scrolling text
Laju - Kod untuk scrolling text

Contoh kod untuk "Scrolling Image" - gantikan alamat URL pautan gambar warna biru dengan pautan sendiri:

<marquee behavior="scroll" direction="left"> <img src="http://i143.photobucket.com/albums/r153/kupia/Beautiful-Bird.jpg" /></marquee>


Contoh kod untuk Imej dan Teks Scrolling - gantikan alamat URL pautan gambar warna biru dengan pautan sendiri:

<marquee behavior="scroll" direction="left"> <img src="http://i143.photobucket.com/albums/r153/kupia/Beautiful-Bird.jpg" /><p>Contoh Teks di bawah imej</p></marquee>


Contoh Teks di bawah imej

3 comments:

Sofyan said... [Balas komen ini]

askum SEMUA

Unknown said... [Balas komen ini]

wasalam jombank,,
calipso,,klu nk buat utk link xchage slot bleh pki kod nie x??

contoh,klu dah byk sgt banner pastu nk jimat ruang buat banner y bergerak..

Calipso said... [Balas komen ini]

w'salam...

link exchange tak sesuai, lain sikit kena buat drop down untuk kod dia. buat button yang kecik punya ok tak banyak pakai space.

Post a Comment