Cara Membuat Text Berjalan dengan Marquee

Salam Sobat... pada sehat semua khan.......

Sudah lama nih GFT gak posting tutorial mendesain blog kangenjuga rasanya berbagi tentang tutorial mendesain blog di blogger hehe...
Cara membuat Text Berjalan dengan mengunakan code marquee ya..! marquee merupakan code untuk membuat text atau image bisa berjalan lurus fertika, horisonta, mondar mandir, tempuk dan sebagainya...... okey langsung saja simak dan praktekkan ya........

cara meletakkan dan penulisan code marquee ini yaitu kita awali dengan code <marquee> dan diakhir </marquee>
contoh sederhana : <marquee> TEXT BERJALAN </marquee> dan akan menjadi seperti dibawah ini text berjalan tak ada henti2... gak capek kali ya.... haha...


TEXT BERJALAN LURUS

dan selanjutnya macam2 contohnya :

1. Text berjalan dari kiri kekanan dan berhenti :

TEXT BERJALAN DAN DI PENGHUJUNG BERHENTI

kode :

          <br />

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>

2. Text Mondar mandir bingung :D

TEXT MONDAR MANDIR BINGUNG
kode :

           <br />

<marquee behavior="alternate">TEXT MONDAR MANDIR BINGUNG</marquee>

3. Text Naik-naik kepohon kelapa hehe.....

TEXT BERJALAN KEATAS

kode :   <br />

<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>

jika sobat ingin Text turun lagi dari pohon kelapa maka pada code direction="up" ganti dengan direction="down"                  

4. Text Lomba Lari Maraton

Slow scroll speedMedium scroll speedFast scroll speed

                                      kode :   <br />

<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>

<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>

<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>                                                                                                                                                                      

5. Nah yang ini code gambar berjalan

kode :   <br />

<marquee behavior="scroll" direction="left"><img alt="smile" height="100" src="CODE GAMBAR / HTTP://GAMBAR" width="100" /></marquee>                                                                                                                                       

6. Text dan Image berjalan dan disertai dengan link

 
Sample text under a Marquee image.

kode :   <br />

<marquee behavior="scroll" direction="left">

<a href="http://gratisfulltain.blogspot.com/">

<img alt="smile" height="300" src="http://websitewordpresspemula.com/wwp/banner-wwp-blue.jpg" width="80" /></a>

<a href="http://gratisfulltain.blogspot.com/">Marquee image</a>.<br />

</marquee>                                                                                                                                       

7. Text Berjalan dan berhenti ketika diklik

COBA SOBAT KLIK PADA TEXT YANG INI..!!

kode :   <marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();"><span style="font-size: large;">COBA SOBAT KLIK PADA TEXT YANG INI..!!</span></marquee>                             

8. Text berhenti jalan ketika kursor mous mengenainya 

ARAHKAN KESINI DONG!!

kode :   <br />

<marquee behavior="scroll" direction="left" onmouseout="this.start();" onmouseover="this.stop();">Go on... hover over me!</marquee>

</center>                                                                                                                                       

9. Menghentikan dan menjalankan Text dengan Tombol 

AYO DONG KLIK TOMBOLNYA...!

  

kode :   <marquee behavior="scroll" direction="left" id="mymarquee"><span style="font-size: large;">

AYO DONG KLIK TOMBOLNYA...!</span></marquee><br />

<marquee behavior="scroll" direction="left" id="mymarquee"><span style="font-size: large;"><br /></span>

</marquee><span style="font-size: large;">

<input onclick="document.getElementById('mymarquee').stop();" type="button" value="Stop Marquee" />

<input onclick="document.getElementById('mymarquee').start();" type="button" value="Start Marquee" /></span>

                                                                                                                                       

10. Text di hentikan dan dijalankan dengan dua tombol

Marquee 1Marquee 2

 
  

kode :   <marquee behavior="scroll" direction="right" id="marquee1" scrollamount="20">

Marquee 1<br />

</marquee>

<marquee behavior="scroll" direction="left" id="marquee2" scrollamount="20">

Marquee 2<br />

</marquee>

<input onclick="document.getElementById('marquee1').stop();" type="button" value="Stop Marquee 1" />

<input onclick="document.getElementById('marquee1').start();" type="button" value="Start Marquee 1" /><br />

<input onclick="document.getElementById('marquee2').stop();" type="button" value="Stop Marquee 2" />

<input onclick="document.getElementById('marquee2').start();" type="button" value="Start Marquee 2" />                  

Keterangan :   1.Klik Rancangan atau Tata Letak

2.Klik Tambah Gadget

3.Pilih HTML/Java sceipt

4.Copy Code cript diatas ,ubah yang bercat kuning dengan kata-kata anda sendiri ,dan ubah kode yang bercat hijau dengan kode URL gambar anda

5.simpan

                                                                                                                                

Cara membuat Text Berjalan dengan marquee
Nah sobatitulah 10 fungsi code marquee, sebenarnya masih banyak contoh lain, tapi kali ini GFT cukupin dulu, lain kali aku terusin dengan contoh dan code-code marquee yang lebih heboh.