Cara Membuat Widget blog bergerak

T, Trik Blogger

Friday 7 June 2013

Belum ada komentar

saya lihat blog teman, disana saya lihat widget bergerak alias berjalan, lo kok bisa ya...trus ku cari deh, akhirnya ketemu juga,  jujur aku sudah mencobanya sob, hihihi...aku posting dulu Cara Membuat Widget blog bergerak, nanti di coba ya...

seperti ini nih, bisa bergerak :

- bolak balik kiri-kanan
- bolak balik naik-turun
- dari atas ke bawah nyambung / sebaliknya
- dari kanan ke kiri nyambung / sebaliknya
untuk menggerakannya anda tinggal rubah saja script-nya, nanti saya akan jelaskan:

1. masuk ke blog anda, seperti biasa
2. Masuk ke tab rancangan
3. Nah, buat widget yang ada script-nya di elemen laman, yang berasal bukan asli dari blogger, yang cara penempatannya menggunakan HTML/JAVASCRIPT

ada 2 jenis kode, tinggal pilih

- untuk bolak balik

a. kanan-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 gadget disini</marquee>

b. atas-bawah

<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 gadget disini</marquee>

- untuk yang terus/nyambung

a. dari kanan ke kiri (arah bisa diganti menjadi right)

<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 gadget disini</marquee>

b. dari bawah ke atas (arah bisa diganti menjadi down)

<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 gadget disini</marquee>

nah tulisan yang berwarna merah diganti dengan script anda. dan ukurannya jga bisa anda atus sesuai template anda

Sumber: http://www.ainisastra.blogspot.com/