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

Tuesday, April 17, 2018

http://starlavenderluna.blogspot.com


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'..? 

http://starlavenderluna.blogspot.com

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. 

http://starlavenderluna.blogspot.com

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.. 

6 comments

  1. wahhh tq for sharing. wah header baru ya kak.cantik

    ReplyDelete
  2. Thanks Shikin, zumal nak cuba juga la jap lagi...

    ReplyDelete
  3. Elok tutorial ni..boleh cuba, thanks share ilmu :)

    ReplyDelete
  4. hadoi lah. rajin bebeno shikin ni.
    aida tak pandai.
    kalau shikin singgah, blog aida gitu aje.
    terfikir nak buat, tapi takde time, shikin.
    nanti porak peranda lagi blog tu. pernah buat, porak-peranda html :) ha ha ha

    ReplyDelete

❧ ✿ Terima kasih atas kesudian awak untuk tinggalkan nota di sini..✿ ❧