Monday, May 21, 2012

Variasi Gambar Bola Basket Berjalan dan Memantul

Salah satu variasi dari blog tutorial kali ini adalah mengkombinasikan kode html untuk perilaku gerakan berjalan dan memantul. Nah gambar berikut ini bukanlah gambar banner animasi, melainkan gambar biasa yang digerakkan dengan perintah marquee (tapi saya kasih contoh juga deh yang dengan animasi plus perintah dengan kode html).


Ini contoh gambar non animasi dikombinasi dengan perintah marquee.



Bila sobat menginginkan gambar bola basket berjalan dan memantul seperti di atas, copas aja kode script di bawah ini.

<marquee behavior="alternate" direction="up" height="150" onmouseout="this.start()" onmouseover="this.stop()" widht="100%"><marquee behavior="alternate" direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3"><a href="http://bloggtutorial4u.blogspot.com/"><img border="0" height="50" src="http://i974.photobucket.com/albums/ae223/masamru/bolabasket1.png" width="50" /></a></marquee></marquee>


Nah kalau yang ini kombinasi html dengan banner animasi, jadinya begini nih



Bila sobat ingin membuat gambar bola basket berjalan memutar dan memantul seperti ini, copas aja kode berikut ini.



<marquee behavior="alternate" direction="up" height="150" onmouseout="this.start()" onmouseover="this.stop()" widht="100%"><marquee behavior="alternate" direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3"><a href="http://bloggtutorial4u.blogspot.com/"><img border="0" height="50" src="http://i.picasion.com/pic53/b706890e980eedfc48139cdcb66edc19.gif" width="50" /></a></marquee></marquee>


Jika ingin dipasang di widget, tambahkan gadget dan masukin aja ke widget HTML. Kalau ingin dipasang di posting Blog ya sobat masuk ke mode HTML lah yaw...

Kode warna merah adalah alamat gambar, bisa sobat gunakan yang ada di atas (saya simpan di photobucket dan yang animasi di picasion sehingga bisa dipasang ditempat sobat juga) atau bisa sobat ganti dengan alamat gambar sobat sendiri, silahkan saja. Dan untuk ketinggian pantulan bola sobat bisa ganti height="150" dengan angka lain, semakin besar angkanya semakin tinggi pula pantulan bolanya.

Ini saya kasih sedikit keterangan untuk memperjelas kode HTML di atas.
Perintah dasar :
<marquee>posisi gambar</marquee> » perintah agar gambar berjalan.

Variasi gerakan :
  1. direction="up" » Mengatur arah gerakan dari bawah ke atas.
  2. direction="right" » Mengatur arah gerakan dari kiri ke kanan.
  3. behavior="alternate" » Untuk mengatur perilaku gerakan bolak balik.
  4. onmouseout="this.start()" onmouseover="this.stop()" » Ketika kursor berada di atas gambar, maka gambar akan berhenti dan ketika digeser gambar berjalan kembali.
  5. scrollamount="angka" » kecepatan gerakan, semakin besar angkanya semakin besar pula gerakannya.
Semoga penjelasan di atas bisa membantu
Oke selamat berkreasi
Salam-BlogTutorial





Baca Juga » Info Kontes - Kompetisi Tingkat Nasional-International


0 komentar:

Follow Us

Daftar Artikel

Created by. Amru Sholihin. Powered by Blogger.

TIPS SEO HARI INI

Anda punya Blog? Atau website ingin meningkatkan Page Rank di Search Engine? Klik logo-logo di bawah ini untuk melihat caranya :
ping fast  my blog, website, or RSS feed for Free Ping your blog, website, or RSS feed for Free My Ping in TotalPing.com

PageRank Display

PageRank