10 Nov 2010

Tutorial Membuat Text Berjalan atau Marquee

Beh.....ketemu lagi ma sobat Blogger mania. Ya bagi sobat blogger mania yang lagi ngumprek-ngumprek nthoeo blog hehehe....gak da salahnya kalo sambil baca ni tutorial, karna bukan apa-apa pengalaman dari saya pribadi tampilan yang biasa disebut text berjalan atau marquee ini pasti sobat-sobat ingin miliki dalam blogger sobat, karna selain dapat digunakan untuk membuat tulisan berjalan, kekanan, kiri, atas dan bawah bisa juga digunakan untuk menaruh gambar, iklan , tukaran link ataupun informasi tentang isi blog kita. Gitu sobat.....

Ok kita langsung saja ke TKP.....
Kali ini saya akan bahas tutorial kita kali ini sampai tajam, setajam silet......hehehe....
Biar yang belum pada mudeng bisa belajar dan mengerti dalam pembuatannya....

Yang sobat perlu lakukan pertama adalah LOGIN dengan menggunakan USER ID sobat di blogger.
Jika sudah silahkan sobat klik menu Layout atau Rancangan.
Setelah sobat masuk ke menu Layout atau rancangan silahkan sobat klik menu Add a Gadget, dan silahkan pilih menu HTML/Javascript, jika sudah silahkan sobat Copy dan Paste kode HTML dibawah ini.
Berikut Kode HTML normalnya :

<MARQUEE align="center" direction="up" height="200" scrollamount="3" width="70%" behavior="alternate">

marquee Normalnya

</MARQUEE> 

Hasilnya seperti ini :




marquee Normalnya



Nah ada beberapa variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.
Kode HTML nya seperti ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="200" height="200" align="center">

silahkan sobat tunjuk di sini

</marquee>

Hasilnya seperti ini




silahkan sobat tunjuk di sini


Berikut Penjelasan dari kegunaan kode HTML yang ada pada Marquee.
  1. onmouseover="this.stop()" ==> maksudnya kalau mouse kita bergerak mengarah ke text, maka text akan berhenti/stop agar bisa dibaca gitu.
  2. onmouseout="this.start()" ==> maksudnya kalau mouse tidak dalam area teks maka teks akan mulai bergerak.
  3. direction="up" ==> maksudnya arah gerak teks ke atas, bisa diganti Left/Right/Down.
  4. BEHAVIOR ===>"scroll/slide/alternate" --> Untuk mengatur perilaku gerakan
    Scroll --> teks bergerak berputar
    Slide--> teks bergerak sekali lalu berhenti
    Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo) 
  5. scrollamount="2" ==> maksudnya angka pengatur kecepatan gerak teks, bisa diganti antara 1 s/d 10 ( 1 lambat, 2 normal, 3 dstnya makin cepat) Gunakan angka 1/2/3 saja cukup.
  6. align="center" ==> maksudnya baris teks letaknya di tengah, bisa diganti Left/Right/Justify
  7. width="100%" ==> maksudnya lebar area teks, bisa diganti dengan angka pixel, misal 220px atau 90%, terserah, sesuaikan dengan lebar sidebar anda.
  8. height="160" ==> maksudnya tinggi area teks dalam pixel, sesuaikan juga dengan ketinggian teks yang akan di masukkan. Bisa juga pakai 100%. 
Nah itu adalah beberapa contoh dari text berjalan, dan bagi sobat bisa membuat arah text berjalan ini sesuai dengan kesukaan sobat silahkan edit pada kode direction nya, seperti pada penjelasan kode HTML di atas.
Lebar dan Tinggi dari tulisan marquee ini pun bisa sobat edit.

OK sobat demikian tutorial yang dapat saya berikan, seperti biasa semoga tutorial kali ini bermanfaat dan tidak ada salahnya berbagi ilmu...
Created bY BlogKotaMangGa


SELAMAT MENCOBA



0 komentar:

Posting Komentar