Jumat, 01 April 2011

[ojegjogja] Cara membuat dan memasang efek marquee atau teks berjalan (komplit)


Contoh 1 :
Kode HTML untuk membuat teks berjalan dari arah kanan ke kiri dengan huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="font-family:arial; font-size: 14px; font-weight:bold; color:#FFFF00;"><marquee direction="left" scrollamount="2" height="20px" width="100%" bgcolor="#0000ff" >Teks berjalan dari kanan ke kiri</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari kanan ke kiri


Contoh 2 :
Kode HTML untuk membuat teks berjalan dari arah kiri ke kanan dengan huruf verdana, bold, warna biru, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud kuning adalah sebagai berikut :

<span style="font-family:verdana; font-size: 14px; font-weight:bold; color:#0000ff;"><marquee direction="right" scrollamount="2" height="20px" width="100%" bgcolor="#ffff00">Teks berjalan dari kiri ke kanan</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari kiri ke kanan


Contoh 3 :
Kode HTML untuk membuat teks berjalan bolak-balik dari kanan ke kiri dengan huruf verdana, bold, warna kuning, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="color:#ffff00; font-family: verdana; font-size: 14px; font-weight: bold;"><marquee bgcolor="#0000ff" behavior="alternate" height="20px" scrollamount="2" width="100%">Teks berjalan bolak-balik dari kanan ke kiri</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan bolak-balik dari kanan ke kiri


Contoh 4 :
Kode HTML untuk membuat teks berjalan dari atas ke bawah huruf arial, bold, warna biru, ukuran huruf 14px, tinggi area 70px, lebar area 100% di atas backgroud kuning adalah sebagai berikut :

<span style="color:#0000ff; font-family: arial; font-size: 14px; font-weight: bold; text-align:center;"><marquee bgcolor="#ffff00" direction="down" height="70px" scrollamount="1" width="100%">Teks berjalan dari atas ke bawah</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari atas ke bawah


Contoh 5 :
Kode HTML untuk membuat teks berjalan dari bawah ke atas dengan huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 70px, lebar area 100% di atas backgroud merah adalah sebagai berikut :

<span style="color:#ffff00; font-family: arial; font-size: 14px; font-weight: bold; text-align:center;"><marquee bgcolor="#ff0000" direction="up" height="70px" scrollamount="1" width="100%">Teks berjalan dari bawah ke atas</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari bawah ke atas


Contoh 6 :
Kode HTML untuk membuat teks berjalan bolak-balik dari atas ke bawah huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 70px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="color:#ffff00; font-family: arial; font-size: 14px; font-weight: bold; "><marquee bgcolor="#0000ff" behavior="alternate" direction="up" height="70px" scrollamount="2" width="100%">Teks berjalan berulang dari atas ke bawah</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan berulang dari atas ke bawah


Contoh 7 :
Kode HTML untuk membuat teks berjalan dari bawah ke atas satu kali setelah itu berhenti dengan huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 70px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="color:#ffff00; font-family: arial; font-size: 14px; font-weight: bold; "><marquee bgcolor="#0000ff" behavior="slide" direction="up" height="70px" scrollamount="3" width="100%">Teks berjalan dari bawah ke atas lalu berhenti</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari bawah ke atas lalu berhenti


Contoh 8 :
Kode HTML untuk membuat teks berjalan dari kanan ke kiri satu kali setelah itu berhenti dengan; huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="color:#ffff00; font-family: arial; font-size: 14px; font-weight: bold;"><marquee bgcolor="#0000ff" behavior="slide" direction="left" height="20px" scrollamount="3" width="100%">Teks berjalan dari kanan ke kiri lalu berhenti</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari kanan ke kiri lalu berhenti


Contoh 9 :
Kode HTML untuk membuat teks memantul berulang-ulang dari kanan ke kiri dengan huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="color:#ffff00; font-family: arial; font-size: 14px; font-weight: bold; "><marquee scrolldelay="10" behavior="alternate" direction="up" width="100%" scrollamount="2" height="70px" bgcolor="#0000ff"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Teks memantul berulang-ulang</marquee>< /marquee></span>

Hasilnya seperti di bawah :
Teks memantul berulang-ulang


Contoh 10 :
Kode HTML untuk membuat teks berjalan dari arah kanan ke kiri dan akan berhenti setelah mouse didekatkan, dengan huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="color: yellow; font-family: arial; font-size: 14px; font-weight: bold;"><marquee behavior="scroll" bgcolor="#0000ff" direction="left" height="20px" onmouseout="start()" onmouseover="stop()" scrollamount="2" width="100%">Teks berjalan dari kanan ke kiri dan akan berhenti setelah mouse didekatkan</marquee></span>

Hasilnya seperti di bawah :
Teks berjalan dari kanan ke kiri dan akan berhenti setelah mouse didekatkan.

Contoh 11 :
Kode HTML untuk membuat teks link dimana teks tersebut berjalan dari bawah ke atas dan akan berhenti setelah mouse didekatkan. Jika link tersebut di-click, maka halaman yang bersangkutan akan terbuka adalah sebagai berikut :

<span style="color:#ffff00; font-family: arial; font-size: 14px; font-weight: bold; "><marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#ffff00" scrollamount="2" direction="up" width="100%" height="100" align="left"><a href="http://www.linksukses.com/2010/01/cara-membuat-textarea.html">Cara membuat Texarea</a>
<a href="http://www.linksukses.com/2010/01/penggunaan-id-dan-class.html">Penggunaan ID dan CLASS</a>
<a href="http://www.linksukses.com/2010/02/syntax-highlighter-untuk-blogger.html"> Syntax Highlighter untuk Blogger</a>
<a href="http://www.linksukses.com/2010/02/efek-kertas-lipat.html">Efek Kertas Lipat</a>
<a href="http://www.linksukses.com/2010/01/efek-bayangan-dengan-photoshop.html">Efek bayangan</a>
</marquee></span>


Hasilnya seperti di bawah :
Cara membuat Texarea
Penggunaan ID dan CLASS
Syntax Highlighter untuk Blogger
Efek Kertas Lipat
Efek bayangan

.

4 komentar:

  1. terimakasih bro atas tutorialnya sangat menarik. salam sukses selalu.

    BalasHapus
  2. Wuiih, dahsyat banget. Panjang umur dan sehat selalu buat Anda, kawan...!

    BalasHapus
    Balasan
    1. Makasih dan selamat belajar, semangat terus.

      Hapus

Silahkan anda berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. OK ....?