Scrolling Text

Pada permulaannya Mari bina blog akan menunjukkan bagaimana membina scrolling text yang mudah dan ringkas yang hanya menggunakan perkataan.

Contoh:
Hasilnya akan kelihatan seperti paparan dibawah ini.

Selamat Datang ke Maribinablog.blogspot.com

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee>Selamat Datang ke Maribinablog.blogspot.com</marquee>



Untuk menambahkan background berwarna pada teks, penambahan perkataan bgcolour dan kod warna HTML perlu dibuat.

Kod warna HTML boleh di ubah di http://html-color-codes.com/

Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang ke Maribinablog.blogspot.com

Copy,paste dan edit tag di dalam notepad untuk membinanya.

<marquee bgcolor="#000033">Selamat Datang ke Maribinablog.blogspot.com</marquee>


Jika anda ingin mengubah arah pergerakan teks, sama ada ke kiri, kanan, atas ataupun bawah,penambahan perkataan direction dan kod arah pergerakan perlu dibuat.

Kod arah pergerakan:

left= ke kiri
right= ke kanan
up= ke atas
down= ke bawah

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang Ke Maribinablog.blogspot.com

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee direction="right" bgcolor="#000033">Selamat Datang Ke Maribinablog.blogspot.com</marquee>


Untuk menjadikan teks bergerak secara ulang alik, penambahan perkataan behavior beserta kodnya perlu di buat.

Kod behavior= alternate

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang Ke Maribinablog.blogspot.com
Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee behavior="alternate" direction="right" bgcolor="#000033">Selamat Datang Ke Maribinablog.blogspot.com</marquee>


Untuk membina scrolling text yang boleh di hentikan dengan cursor mouse, penambahan perkataan onmouseover, onmouseout dan scrollamount perlu dibuat. Kod this.stop(), this.start () dan kelajuan pergerakan scrolling text juga perlu di masukkan.

Kod scrollamount = 1- 5 (anda boleh mengubah mengikut angka pilihan anda, tetapi semakin tinggi nilainya semakin laju pergerakan teks tersebut.)

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah ini.

Selamat Datang Ke Maribinablog.blogspot.com

Copy,paste dan edit tag di bawah ke dalam notepad untuk membinanya.

<marquee behavior="alternate" direction="left" bgcolor="#000033" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">Selamat Datang Ke Maribinablog.blogspot.com</marquee>


Anda juga boleh mengubah pergerakan teks secara variasi dalam satu pergerakan.Penambahan perkataan height dan kod saiz perlu dibuat. Tag untuk pergerakkan ke 2 perlu di tambah.

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah.

Selamat Datang Ke Maribinablog.blogspot.com

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<marquee behavior="alternate" direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" bgcolor="#000033"><marquee direction="right" behavior="alternate">Selamat Datang Ke Maribinablog.blogspot.com</marquee></marquee><br />


Untuk membina scrolling text yang mempunyai background bergambar terdapat beberapa tag dan kod yang perlu di tambah.Untuk menukarkan background berwarna kepada background bergambar gantikan perkataan bgcolour kepada background beserta link gambar tersebut. Saiz ukuran background juga perlu di tambah.

Contoh:
Hasilnya akan kelihatan seperti paparan di bawah.

Selamat Datang ke Maribinablog.blogspot.com Di harap anda mendapat manfaat dari posting di sini.

Perkataan-perkatan yang di highlightkan perlu di ubah.

width:338px dan height: 75px diubah kepada ukuran tinggi dan lebar gambar background anda.

background=="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg" di ubah kepada link background tersebut.

border="1" iaitu border bagi gambar background di ubah kepada saiz border pilihan anda.

bordercolor="white" iaitu warna border di ubah kepada warna border pilihan anda.

font-size:+30 di ubah kepada saiz font pilihan anda dan mengikut kesesuaian tinggi gambar background

Colour:#FF0000 di ubah kepada kod warna pilihan.

width: 30px dan height: 30px di ubah kepada ukuran saiz gambar yang bergerak di atas gambar background.

src="http://www.uptownshelby.biz/blogger_logo.png" di ubah kepada link gambar yang bergerak di atas background

Selamat Datang ke Maribinablog.blogspot.com Di harap anda mendapat manfaat dari posting di sini di ubah kepada teks pilihan anda.

Copy,paste dan edit tag dibawah ke dalam notepad untuk membinanya.

<table style="border-collapse: collapse; width: 338px; height: 75px;" background="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg" border="1" bordercolor="white"><tbody><tr><td><span style="font-family:arial black;font-size:+30;color:#FF0000;"><marquee><img style="width: 30px; height: 30px;" src="http://www.uptownshelby.biz/blogger_logo.png" /> Selamat Datang ke Maribinablog.blogspot.com Di harap anda mendapat manfaat dari posting di sini. </marquee></span></td></tr></tbody></table><br />