Tutorial : Cara buat widget blog bergerak dari arah naik turun atau kanan kiri

Assalamualaikum wbt...

Orang kata, jangan lokek dalam berkongsi ilmu yang kita ada, sebab mungkin dengan ilmu yang kita perolehi ini, orang lain yang akan mendapat manfaat dan sekaligus kita dapat berbakti pada masyarakat..

Awak perasan tak pada kolum 'Nota Terkini' atau lebih dikenali sebagai 'Recent Comment'..? 

Mesti awak perasan yang nota tue bergerak daripada bawah hingga ke atas kan..? Pada mulanya widget ' Recent Comment' inilah hanyalah dalam bentuk statik saja tanpa bergerak.. Tapi saya nak mengecilkan ruang jurnal saya nie, so saya godek-godeklah untuk mencari coding, camne nak bagi 'minimize' ruang ini.. Akhirnya saya berjumpa jugak dan saya akan kongsikan dengan awak..

Untuk membuatkan widget blog ini bergerak, awak harus mengubah script-nya saja.. Caranya mudah aje.. Awak pergi pada 'Layout' dan kemudian awak klik pada 'Configure HTML/JavaScript'. Jika awak dah ada coding sesuatu widget sebagai contohnya coding untuk widget 'Recent Comment' ataupun teks biasa, letakkan pada kolum 'Content' seperti dalam gambar. 

Kemudian, ada 2 kaedah yang berbeza untuk menggerakkan widget tersebut..

Kaedah pertama : Secara ulang alik

a) Widget bergerak daripada kanan ke kiri
<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

b) Widget bergerak daripada kiri ke kanan

<marquee behavior='alternate' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

c) Widget bergerak daripada bawah ke atas

<marquee behavior='alternate' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

d) Widget bergerak daripada atas ke bawah

<marquee behavior='alternate' align='center' direction='down' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

Kaedah kedua : Secara terus menerus 

a) Widget bergerak daripada kanan ke kiri
<marquee behavior='scroll' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

b) Widget bergerak daripada kiri ke kanan

<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

c) Widget bergerak daripada bawah ke atas

<marquee behavior='scroll' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

d) Widget bergerak daripada atas ke bawah

<marquee behavior='scroll' align='center' direction='down' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau Script widget Anda Disini</marquee>

Lepas tue, tekan 'save' dan widget tue dah tersedia.. Semoga bermanfaat dan selamat mencuba..