rileks jap... aku Mizan: tutorial; membuat perkataan bergerak

welkang... welkang... to my blog Cgu Mizan

ilmu yang sempurna lahir dari pendidikan yang ikhlas, jujur, keyakinan dan paling penting adalah menghargai pengorbanan ibubapa, guru dan diri sendiri.... muafakat, saling berganding bahu, kerjasama satu pasukan pasti dapat 'MELESTARIKAN PENDIDIKAN TERBILANG'...

aku seorang cikgu. sudah banyak rentetan pengalaman pahit dan manis yang telah aku lalui... sudah 25 tahun aku mengajar disalah sebuah sekolah menengah dan sekarang beralih angin mengajar di Kolej Vokasional di negeri terengganu, sudah beribu-ribu orang bekas anak didikku... ada yang dah bersuami/isteri, ada yang tak kahwin-kahwin lagi... acapkali juga aku berselisih @ berjumpa tanpa dirancang, alhamdulillah ramai juga yang menegur sapa, ajak gi kedai pekene teh tarik, ajak gi rumah... ini kebanyakkan bekas pelajar yang dulunye mase kat sekolah adalah pelajar bermasalah... kene rotan, pumping, denda(maklumlah dulu aku warden asrama, kini guru disiplin pulak).... tp diorang anggap itu satu pengalaman mengajar erti kehidupan... sebenarnya ramai juga yang berselisih tapi tak nak tegur, apa lagi memalingkan muka pulak... tak pa itu hak diorang..... yang penting kerja buat aku ikhlas demi anak bangsa... aku tetap aku

kepada semua warga pendidik semoga usaha, kesungguhan dan bakti cikgu mendapat rahmat dan limpahan kurniaNya.GURU PENJANA TRANSFORMASI PENDIDIKAN NEGARA. semoga cikgu dan keluarga dalam naungan danlindunganNya. amin.. allahhu akhbar.

sambil duk rileks tu, bolehlah kita berkongsi idea, maklumat dan pandangan dalam semua kategori yg diketengahkan; PENDIDIKAN, ISU SEMASA, TAZKIRAH, SUKAN, JALANG-JALANG CARI MAKANG, CHERY EASTAR CLUB dan CATATAN KU...

Ahad, 17 Jun 2012

tutorial; membuat perkataan bergerak

Membuat perkataan yang bergerak dapat menarik minat pengunjung terhadap pergerakan tersebut seterusnya menarik minat pengunjung apa yang ingin disampaikan oleh pemilik blog. Selain dikenali sebagai scrolling text, ianya juga dikenali sebagai marquee text.

Walaupun pergerakan ini menarik minat, tetapi tidak digalakkan untuk diletakkan terlalu banyak di dalam blog kerana dibimbangi keadaan 'menarik' bertukar 'menyerabutkan'.:)

Berikut adalah tutorial untuk membuat perkataan bergerak.
Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.
1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)

<marquee>Contoh scrolling text</marquee>

Output untuk kod ini seperti berikut:
Contoh scrolling text

2. Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.direction="left"
direction="right"
direction="up"
direction="down"

Berikut contoh kod untuk pegerakan dari kanan ke kiri

<marquee direction="right" >Contoh scrolling text</marquee>

Output untuk kod ini adalah
Contoh scrolling text

3.Ubah warna background
Untuk ubah background, perlu diletakkan kod berikutbgcolor="#kod warna"

Senarai kod warna boleh didapati disini.

Contoh kod yang diletakkan background,

<marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini adalah
Contoh scrolling text

4. Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.behavior="alternate"

contoh kod yang diletakkan trick ini.

<marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>

Output untuk kod ini
Contoh scrolling text

5.Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikutscrollamount="2"

Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>

Output:
Scrollamount :2
Contoh scrolling text

Scrollamount :4
Contoh scrolling text

6. Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

Penambahan kod yang perlu dilakukan adalahonmouseover="this.stop()" onmouseout="this.start()"

Contoh kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>

output untuk trick ini.
Contoh scrolling text