[ojegjogja] Cara mudah membuat dan memasang tabel di blog

Fungsi tabel pada sebuah blog tidak bisa kita anggap remeh. Dengan tabel kita bisa membagi suatu halaman menjadi beberapa bagian. Dengan tabel kita juga bisa menyajikan sebuah laporan, meletakkan sebuah gambar atau foto, dan lain sebagainya.Adapaun cara membuat dan memasang  tabel di blog adalah sebagai berikut : .

Kode HTML  untuk membuat tabel :

Untuk membuat sebuah tabel harus diawali dengan kode <table> dan diakhiri dengan kode </table>

<tr></tr>	merupakan tag yang berfungsi untuk membuat baris tabel.
<td></td>	merupakan tag yang berguna untuk membuat kolom tabel.

<th></th> merupakan tag yang berguna untuk membuat header.

Tag- tag di atas mempunyai  atribut seperti di bawah ini:

bgcolor	- untuk mewarnai tabel (backgoround).
background	- apabila ingin membuat background tabel di ambil dari suatu gambar
width	- untuk menentukan lebar tabel
height	- untuk menentukan tinggi tabel
align	- untuk mengatur perataan horizontal
valign	- untuk mengatur perataan vertikal
border	- untuk menentukan tebal bingkai bingkai tabel
cellspacing	- untuk menentukan jarak antar kolom
cellpadding	- untuk menentukan jarak antara isi dengan tepi kolom (margin)
colspan	- untuk menentukan berapa kolom tabel yang akan digabung
cowspan	- untuk menentukan berapa baris yang akan digabung

Berikut beberapa contoh tabel :

Tabel: 1 kolom
Kodenya :
<table border="1">
<tr> <td>kolom 1, baris 1</td> </tr>
<tr> <td>kolom 1, baris 2</td> </tr>
<tr> <td>kolom 1, baris 3</td> </tr>
</table>
Hasilnya :

kolom 1, baris 1

kolom 1, baris 2

kolom 1, baris 3

Table: 3 kolm, 2 baris
Kodenya :
<table width="100%" border="1">
<tr> <td bgcolor="yellow">kolom 1, baris 1</td><td>kolom 2, baris 1</td><td bgcolor="yellow">kolom 3, baris 1</td></tr>
<tr> <td>kolom 1, baris 2</td> <td bgcolor="yellow">kolom 2 ,baris 2</td><td>kolom 3, baris 2</td></tr>
</table>
Hasilnya : 

kolom 1, baris 1	kolom 2, baris 1	kolom 3, baris 1
kolom 1, baris 2	kolom 2 ,baris 2	kolom 3, baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table width="100%" border="1">
<tr> <td bgcolor="yellow">kolom 1, baris 1</td> <td>kolom 2, baris 1</td> </tr>
<tr> <td>kolom 1, baris 2</td> <td bgcolor="yellow">kolom 2 ,baris 2</td> </tr>
</table>
Hasilnya : 

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2 ,baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table width="80%" border="1">
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td><td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td><td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</table>
 Hasilnya :

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2, baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table border="1" cellpadding="10"><tbody>
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td> <td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
 Hasilnya :

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2, baris 2

Tabel: 2 kolom, 2 baris
Kodenya :
<table border="1" cellspacing="10"><tbody>
<tr> <td bgcolor="yellow" width="70%">kolom 1, baris 1</td> <td width="30%">kolom 2, baris 1</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td bgcolor="yellow" align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
 Hasilnya :

kolom 1, baris 1	kolom 2, baris 1
kolom 1, baris 2	kolom 2, baris 2

Table: gabungan
Kodenya :
<table border="1" cellspacing="5"><tbody>
<tr> <td bgcolor="yellow" colspan="2">kolom gabungan</td> </tr>
<tr height="50"> <td valign="top">kolom 1, baris 2</td> <td align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
Hasilnya : 

kolom gabungan
kolom 1, baris 2	kolom 2, baris 2

Tabel: gabungan
Kodenya :
<table border="1" cellspacing="5"><tbody>
<tr> <td bgcolor="yellow" rowspan="2" width="70%">kolom 1 gabungan</td> <td width="30%">kolom 2</td> </tr>
<tr height="50"> <td align="right">kolom 2, baris 2</td> </tr>
</tbody></table>
 Hasilnya :

kolom 1 gabungan	kolom 2
	kolom 2, baris 2

Tabel : Background dan teks berwarna
Kodenya :
<table border="1">
<tbody>
<tr bgcolor="blue" style="color: yellow;"> <td>background biru, teks kuning </td> <td>background biru, teks kuning </td> </tr>
<tr> <td bgcolor="blue" style="color: yellow;">background biru, teks kuning </td> <td bgcolor="yellow" style="color: blue;" td="">background kuning, teks biru</td> </tr>
<tr bgcolor="yellow" style="color: blue;"> <td>background kuning, teks biru</td> <td>background kuning, teks biru</td> </tr>
</tbody></table>
Hasilnya : 

background biru, teks kuning	background biru, teks kuning
background biru, teks kuning	background kuning, teks biru
background kuning, teks biru	background kuning, teks biru

Tabel difungsikan untuk meletakan banner
Kodenya :
<table border="1" >
<tr> <td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldbuburayam.jpg" height="125" width="200" /></a> </td><td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldayamgorneg.jpg" height="125" width="200" /></a> </td> </tr>
<tr> <td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/slddadarpenyet.jpg" height="125" width="200" /></a> </td><td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/sldtempepenyet.jpg" height="125" width="200" /></a> </td> </tr>
</table>
 Hasilnya :

[ojegjogja] Membuat dan memasang Teks berjalan lebih dari 2 (dua) warna

Menanggapi permintaan salah satu teman yang menanyakan tentang cara membuat Teks berjalan dengan menggunakan lebih dari 2 (dua) warna, maka pada kesempatan kali ini saya sempatkan untuk memenuhi permintaan tersebut.  Karena keterbatasan waktu, maka saya hanya memberikan 1 (satu) contoh saja, untuk selanjutnya saya harap anda bisa mengembangkan sendiri.  Untuk mengetahui  kode warna anda bisa klik di sini. 

Adapun cara memasangnya adalah sebagai berikut :

1.    Login ke blog anda

2.    Klik Rancangan

3.    Dalam menu Elemen Laman klik Tambah Gadget / Add Widget

4.    Pilih HTML

5.    Copy Paste kode di bawah ke dalam Gadget tersebut

Kedenya adalah sebagai berikut :

<div style="text-align: center; margin:0 0 5px 0; font-weight:bold; font-size:40px"><marquee behavior="alternate" scrollamount="3" height="45px" width="1000px"><span style="color: yellow;">www.</span><span style="color: #66ff33;">ojeg</span><span style="color: #66ffcc;">jogja.</span><span style="color: yellow;">blogspot.</span><span style="color: #66ff33;">com</span></marquee></div>

Keterangan :
Untuk teks yang berwarna merah anda bisa mengganti macam warnanya sesuai keinginan dengan cara mengubah kode warnanya.

Hasilnya seperti di bawah :

www.ojegjogja.blogspot.com

[ojegjogja] Cara memasang banner berderet atau berjejer ke samping di bawah atau di atas header

Cara Memasang banner berderet kesamping / menyamping yang diletakan di atas maupun di bawah header, tidak perlu pusing-pusing dengan membagi halaman atau ruangan menjadi beberapa bagian. Syaratnya blog anda harus mempunyai elemen halaman di bawah atau di atas header, kalau blog anda belum mempunyai anda bisa menambah elemen tersebut dengan cara klik di sini. Dengan hanya menambah kode <td> dan </td> pada awal dan akhir script atau kode banner HTML, jadilah beberapa banner akan terpasang secara berderet menyamping. Oke tidak perlu panjang lebar langsung aja ke TKP : 

Di sini ada 3 (tiga) banner, cara memasangnya sebagai berikut :

1. Login ke blog anda,
2. Pilih Rancangan > Tata letak/Layout,
3. Klik tambah gadget,
4. Klik HTML/JavaScript,
5. Copy paste kode di bawah ke halaman konten,
6. Beri judul kalau perlu,
7. Klik simpan dan selesai.

<td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldbuburayam.jpg" height="125" width="223" /></a></p></td>
<td><a href="http://buburayamketawajago.co.cc"><img src="http://i1143.photobucket.com/albums/n628/panda_281/sldayamgorneg.jpg" height="125" width="223" /></a></p></td>
<td><a href="http://buburayamketawajago.co.cc"><img src="http://s1143.photobucket.com/albums/n628/panda_281/slddadarpenyet.jpg" height="125" width="223" /></a></p></td>

Mudahkan caranya ?  Nah sekarang saatnya anda menciba  ee ...... ee  mencoba.

[ojegjogja] Cara menyembuhkan atau menyuburkan tanaman hias yang sedang sakit

Tanaman hias yang biasanya diletakan di dalam pot kalau tidak secara teratur disiram air atau diberi pupuk lama kelamaan bisa menjadi kurus, bahkan bisa mati. Untuk mencegah agar tanaman tidak mati sebelumnya lakukan beberapa tindakan seperti di bawah :

• Ganti media tanam yang sudah jelek dengan yang baru, tentunya dipilih yang baik,
• Kalau memang akan diganti dengan media tanam yang baru bersihkan akar dari media tanam yang lama dengan cara dicelupkan ke dalam air,
• Kurangi daunnya dan sisakan secukupnya untuk merangsang tumbuhnya daun baru,
• Masukkan tanaman ke dalam pot bersama media tanam yang baru tersebut,
• Siram dengan air leri (air bekas cucian beras) secukupnya,
• Kalau media tanam masih bagus, keterangan di atas tidak perlu dilakukan, cukup dengan menyiram tanaman dengan air leri saja secukupnya,
• Untuk melihat hasilnya tunggu kurang lebih 1 (satu) minggu.

Selamat mencoba semoga berhasil.

[ojegjogja] Cara menanak atau memasak nasi agar tidak cepat basi

Memasak nasi agar tidak cepat basi

Memasak nasi adalah kegiatan rutin ibu-ibu rumah tangga. Ada yang memasak nasi sehari 3 kali yaitu menjelang makan pagi, siang dan malam hari. Banyak juga yang memasak nasi sekali sehari untuk keperluan makan pagi, siang dan malam hari. Hal ini tentunya umur nasi menjadi lebih lama. Untuk jenis beras tertentu setelah menjadi nasi dalam waktu kurang lebih 10 jam akan berubah warna dan baunya, bahkan ada yang sudah mendekati basi. Untuk mengatasi agar nasi tidak cepat basi caranya adalah sebagai berikut :

· Masak air sesuai takaran (seperti biasanya) sampai mendidih

· Cuci beras yang akan dimasak, bilas kurang lebih 3 (tiga) kali

· Masukkan beras yang sudah dicuci ke dalam loyang magic com

· Setelah air yang dimasak sudah mendidih masukkan ke dalam loyang magic com yang berisi beras yang akan dimasak tadi

·  Tambahkan air jeruk nipis kurang lebih satu iris

·  Tutup magic com dan jangan lupa menyalakannya

·  Tunggu nasi sampai benar-benar masak

Begitulah ceritanya cara memasak nasi agar tidak cepat basi. Selamat mencoba dan lihat hasilnya, jangan lupa kasih komentar.

[ojegjogja] Cara memasang kotak scroll (Scrollbox) di sidebar.

Cara memasang kotak scroll (Scrollbox) di sidebar

Efisiensi (penghematan) tempat pada sebuah blog juga perlu dilakukan. Salah satunya adalah dengan memasang Scrollbox. Selain menghemat tempat, widget ini juga bisa mempermudah pengunjung blog untuk mengetahui beberapa artikel yang ada di blog tersebut. Lulu apa ya yang dimaksut dengan Scrollbox ? Saya sendiri kalau disuruh menjawab juga masih bingung. Supaya kita sama-sama tidak bingung silahkan lihat kotak sidebar sebelah kanan blog ini yang di atasnya ada tulisan BLOG TUTORIAL. Sekarang jadi jelas kan ?  Oke supaya tidak terlalu panjang ndobosnya, pada kesempatan kali ini saya akan menjelaskan cara memasang Scrollbox di sidebar. Adapun cara memasang beserta kode HTML nya adalah sebagai berikut :

1. Login blogger

2. Klik Rancangan

3. Dalam menu Elemen Laman klik Tambah Gadget / Add Widget

4. Pilih HTML

5. Copy Paste kode di bawah ke dalam Gadget tersebut

<div style="overflow:auto; width:250px ; height:100px ;border:1px solid ;padding:8px;margin:10px 0 0">

<ul><li><a href="http://www.buburayamketawajago.co.cc/2011/03/marquee-bgcolor0000ff-behavioralternate.html">1. Daftar Menu Makanan.</a></li></ul>

<ul><li><a href="http://ojegjogja.blogspot.com/2010/11/manfaat-air-leri.html">2. Manfaat air leri bagi tumbuhan / tanaman.</a></li></ul>

<ul><li><a href="http://www.buburayamketawajago.co.cc/">3. Bubur Ayam Kremes "KETAWA".</a></li></ul>

<ul><li><a href="http://ojegjogja.blogspot.com/2011/04/cara-mudah-menambah-elemen-halaman-di.html">4. Menambah elemen halaman di atas header.</a></li></ul>

<ul><li><a href="http://www.buburayamketawajago.co.cc/2011/03/normal-0-false-false-false-in-x-none-x_05.html">5. Mau pesan makanan ?</a></li></ul>

</div>

6. Klik simpan
7. Untuk melihat hasilnya silahkan klik di sini.




Catatan :

• width :400px    adalah lebar kotak scroll
• height:100px    adalah tinggi kotak scroll
• lebar dan tinggi kotak scroll bisa dirubah sesuai kebutuhan dan tergantung isi yang ada di dalam kotak nantinya. Kalau isinya sedikit tapi ukuran kotaknya terlalu lebar atau tinggi akhirnya kotak scroll tidak akan berfungsi dan bentuknya hanya berupa segi empat. 
• teks yang berwarna kuning adalah alamat ulr
• teks yang berwarna merah adalah judul dari alamat url.

[ojegjogja] Menyembunyikan Judul blog (blog title) dan Keterangan blog (blog description) di blogspot.

Judul blog (blog title) dan keterangan blog (blogn description) merupakan bagian yang tak terpisahkan dari sebuah blog. Namun ada juga beberapa blogger dengan sengaja tidak memperlihatkan Judul dan Keterangan di blognya atau dengan kata lain disembunyikan. Mungkin Anda adalah salah satu yang setuju dengan tindakan ini tapi belum tahu caranya. Kalau cuma soal sembunyi menyembunyikan Anda tidak usah khawatir, saya akan kasih tahu caranya. Caranya adalah sebagai berikut :

A. Cara menyembunyikan Judul Blog (Blog Title) :

1.     Login di Blogger, pada Dashboard  klik  Rancangan, kemudian pilih Edit HTML, ingat sebelum mulai mengedit kode-kode dalam Template sebaiknya  Download Template dahulu karena apabila gagal, maka hasil download tadi bisa untuk mengembalikan kondisi template kembali seperti sebelumnya;

2.     Cari stuktur kode seperti bawah ini:

#header h1 {

margin:0;

padding:10px 30px 5px;

line-height:1.2em;

font:normal bold 354% ‘Trebuchet MS’,Verdana,Arial,Sans-serif;

display:none;

}

Atau kalau tidak ada coba cari kode :

.Header h1 {

  font: $(header.font);

  color: $(header.text.color);

  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

display:none;

}

3.     Tambahlah kode display:none; pada baris kode seperti contoh di atas;

4.     Simpan Template;

5.     Klik  lihat blog untuk melihat hasilnya.

B. Cara menyembunyikan Keterangan Blog (Blog Description) :

1.     Langkah-langkahnya sama dengan cara menyembunyikan judul blog, selanjutnya cari kode di bawah ini:

#header.description {

margin:0;

padding:5px 30px 10px;

line-heihgt:1.5em;

font:normal normal 110%’Trebuchet MS’,Verdana,Arial,Sens-serif;

display:none;

}

Atau kalau tidak ada coba cari kode :

.header-inner .Header .descriptionwrapper {

  padding: 0 $(header.padding);

display:none;

}

2.     Tambahlah kode display:none; pada baris kode seperti contoh di atas;

3.     Simpan Template;

4.     Klik lihat blog untuk melihat hasilnya.

Catatan:

• Struktur kode dalam setiap Template tidak selalu sama, oleh karena itu kode HTML yang terdapat di Template satu dengan yang lain tidak sama.

Selamat mencoba semoga berhasil.

[ojegjogja] Menambah elemen halaman di atas Header dengan mudah

Beberapa blogger ada yang tidak puas kalau blognya hanya mempunyai elemen halaman di bawah header, sehingga ada yang menambah elemen halaman di atas header blog milik mereka. Yang dimaksud diatas header adalah di atas judul blog. Dengan adanya tambahan elemen halaman ini kita bisa meletakan daftar menu, foto, gambar, iklan dll. Bagi yang tertarik dan ingin menambah elemen halaman di atas header, caranya adalah sebagai berikut :

1. Login ke blog anda
2. Pilih Rancangan >Tata letak/Layout > Edit HTML
3. Cari kode ]]></b:skin> gunakan tombol F3 untuk memudahkan pencarian kode tersebut
4. Jika sudah copy paste kode di bawah baris ini dan letakan di atas ]]></b:skin>

#gadget_header{margin:10px 0;padding:1%; width:100%;}

5. Kemudian cari kode <div id="header-wrapper">
atau <div class="header-outer">
6. Copy paste kode di bawah baris ini dan letakan di atas salah satu kode di atas

<div id="gadget_header"><b:section class='header' id='gadgetheader' preferred='yes'/></div>

7. Simpan teplate.

Untuk melihat hasilnya tidak perlu klik Blog, tapi klik Rancangan dan lihat persis di bawah Navbar terdapat tulisan Tambah Gadget.

[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

.