Membuat efek Marquee

Oleh kang Rohman. Sunday, April 29, 2007

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau
berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya
karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat
tempat pada halaman blog.

Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

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)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka
semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200"

scrollamount="2" width="30%">

marquee dari kanan ke kiri

</MARQUEE>

hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

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

marquee menurut perilaku

</MARQUEE>

marquee menurut perilaku

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><FONT FACE="georgia" color="White"><B><MARQUEE

BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

</MARQUEE></b></FONT></div>

hasilnya :
marquee dengan variasi hurup
Ada 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.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()"

scrollamount="2" direction="up" width="50%" height="200"
align="center">

silahkan tunjuk ke sini

</marquee>

hasilnya :

silahkan tunjuk ke sini

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()"

scrollamount="2" direction="up" width="100%" height="100"
align="center">

<a href="http://rubrik-elektronik.blogspot.com"
target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com"
target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan

</a><br/>

</marquee>

hasilnya :
Rubrik Elektronik Electronic Rubric Kolom iklan

Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta
variasi-variasi dari marquee ini.

Selamat ber eksperimen

Image dalam Kode Marquee

Oleh kang Rohman. Sunday, July 15, 2007
Sobat guest (karena beliau tidak memperkenalkan namanya) mengajukan pertanyaan sampai dua
kali pada shoutbox dalam dua hari berturut-turut. Sebuah keinginan yang di dorong rasa ingin tahu
tentang apakah bisa sebuah gambar atau image di masukan ke dalam kode marquee ( kode untuk
membuat text bisa bergerak/berjalan ). Keingintahuan yang harusdi jawab, dan sebenarnya sudah
saya jawab melalui shoutbox/buku tamu pula. Akan tetapi sebuah jawaban singkat saja mungkin
tidak akan dapat mewakilinya, dan agar jawabannya dapat di cerna dengan mudah sengaja saya
tuangkan ke dalam artikel ini.

Jawabannya adalah sebuah ataupun beberapa buah gambar dapat di masukan ke dalam kode
marquee. Seperti halnya teks biasa, kita hanya perlu memasukan kode gambar ke dalam kode
marquee.

Prinsip dasarnya seperti ini :

<marquee>

Teks, links, gambar, atau apa saja yang ingin di masukan.

</marquee>

Dari prinsip dasar diatas, maka kita hanya perlu memasukan kode gambar diantara kode marquee,
sangat sederhana. Kode marquee yang dipakai tentu saja banyak variasinya, tergantung mana yang
akan di pakai. Dan tidak hanya terpatok di situ saja, kita bisa memadukan berbagai kode HTML di
dalam marquee, semisal apabila teks ingin berada di tengah-tengah, rata kiri, rata kanan, rata kiri-
kanan, memakai bingkai, menggunakan warna latar belakang, dan atau apa saja. Tentunya di
perlukan suatu kreatifitas agar kita bisa memadukannya.

Perlu di ketahui bahwa kode marquee ini tidak terlalu dimengerti oleh browser Firefox, terutama
versi yang terdahulu. Untuk versi terbaru pun memang sudah bisa mengerti (soalnya sekarang saya
pake versi terbaru) akan tetapi tetap saja tidak seindah seperti ketika kita melihatnya melalui
internet explorer. Akan tetapi lagi nih, jangan dulu berburuk sangka bahwa browser firefox tidak
bagus, tentunya banyak kode-kode HTML yang lain akan berfungsi dengan baik apabila di lihat
dengan firefox dan tidak berfungsi dengan baik apabila di lihat dengan internet explorer. Jadi pikir-
pikir dulu apabila ingin menggunakan kode marquee, terlebih dalam jumlah yang banyak alias
setiap sudut halaman blog menggunakan kode marquee.

Kembali lagi ke bahasan utama yaitu membuat gambar bisa bergerak dengan marquee, sobat tinggal
memasukan kode gambar di dalamnya. Jika ingin ada beberapa buah gambar untuk memisahkannya
(tidak berdempetan), sobat harus menyisipkan kode <br/> diantara kode gambar untuk arah vertikal
dan kode &nbsp; (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini
-->       & n b s p ;     tapi tanpa sepasi alias bersatu). Saya berikan contoh, alamat foto yang saya
miliki seperti ini :

http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg

http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg

Untuk membuat foto tersebut tampil harus menggunakan kode html tambahan :
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" />

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" />

hasilnya seperti ini :

yang di tampilkan di atas adalah dalam ukuran asli, jika ingin memperkecil maka tinggal
memasukan atribut width="..." serta height="...". sebagai contoh saya ubah menjadi, tinggi 130
pixel dan lebar 190 pixel maka kodenya menjadi seperti ini :
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

Maka hasilnya akan seperti ini :

Sekarang bagaimana memasukan kode gambar tersebut ke dalam marquee?

Saya ambil contoh, kode marquee yang di pakai adalah dengan variasi agar ketika mouse menyorot
pada gambar berhenti, maka kodenya akan seperti ini :
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%"
height="200" align="center">

<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

<br/><br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />
</marquee>

Itu tadi yang polos alias gambar saja yang yang bergerak. Jika ingin sedikit variasi bisa memakai
bingkai. kodenya seperti ini :
<table border="10" cellpadding="3" height="135" width="195"/>
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192"
height="132" align="center">
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />
<br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>
</td>
</tr>
</table>

Itu tadi memakai bingkai dengan warna latar belakang default (putih), jika ingin ada warna latar
belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh
dengan warna background biru muda :
<table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192"
height="132" align="center">
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />
<br/>
<img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />

</marquee>
</td>
</tr>
</table>

Untuk melihat efek dari kode-kode yang saya tulis, silahkan sobat klik di sini !

Mudah-mudahan mudah untuk di mengerti. Selamat mencoba !

Blogroll Alternatif
Oleh kang Rohman. Friday, May 25, 2007
Judulnya lucu ya, kaya pengobatan saja pake kata altenatif segala, pengobatan alternatif kalee..

Baiklah para sobat semua, dalam kesempatan kali ini saya akan membicarakan tentang yang
namanya Blogroll.

Apa itu Blogroll?

Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link antar blog atau
website adalah menyimpan link address milik orang lain pada blog/website milik kita.
Apa manfaat dari blogroll?

Mungkin secara sekilas para sobat berpikir bahwa memasang link address milik orang lain pada
blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita memberikan jalan kepada
para pengunjung untuk meninggalkan blog kita. Alasan itu mungkin ada benarnya, akan tetapi tidak
seutuhnya benar. Dengan adanya blogroll banyak sekali manfaat yang kita dapatkan, antara lain
yaitu mempererat tali silaturahmi atau tali persaudaraan diantara pemilik blog/website. selain itu
semakin banyak blog kita di link oleh blog lain maka semakin baik pula posisi rangking blog kita
pada Search Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama
kita ketahui bahwa setiap pemilik blog/website berkeinginan bahwa blog/website miliknya
mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link jangan pelit,
karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau pasang link addres milik
kita pada blog mereka.

Terus apa hubungannya dengan judul di atas?

Oh iya ke asyikan bercerita jadi lupa pada topik bahasan. OK kita kembali ke lap....top
(yeee..ngekor ama tukul) eh topik bahasan. Bagi para sobat yang baru membuat blog dan baru
memiliki blogroll hanya beberapa saja mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin
barangkali nanti setelah link sobat jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa
jadi bermanfaat. Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link
Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah mencapai ratusan
atau bahkan ribuan tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan
tempat yang banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika sobat
mempunyai masalah demikian, maka saya akan memberikan beberapa alternatif jalan keluarnya
(tuh kan jadi nyambung, keluar juga kata alternatif nya). Yaitu antara lain :
 Blogroll dengan marquee

yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog adalah
dengan menggunakan perintah marquee.

Contoh membuat blogroll dengan perintah marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()"

scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://rubrik-elektronik.blogspot.com"
target="_blank">Rubrik Elektronik</a>
<br/><br/>
<a href="http://user-online.blogspot.com"
target="_blank">User Online</a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com"
target="_blank">free Blog Template</a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com"
target="_blank">Authorize service</a>
<br/><br/>
<a href="http://contoh-blog.blogspot.com/"
target="_blank">Blog D'Tree</a>
<br/><br/>
</marquee>

Maka nanti yang akan tampil pada blog kita adalah seperti ini :

Rubrik Elektronik User Online free Blog

Template Authorize service Blog D'Tree

Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di atas,
tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih
cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3"
,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah
tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" ,
direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat
dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di
inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di
ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" ,
height="250" .

Ada variasi lain, yaitu dengan memakai tabel, contoh :

<table border="3" width="155" height="130" cellpadding="2">

<tr>

<td align="left">

<marquee onmouseover="this.stop()" onmouseout="this.start()"

scrollamount="2" direction="up" width="100%" height="200" >
 <a href="http://rubrik-elektronik.blogspot.com"
target="_blank">Rubrik Elektronik</a>
<br/><br/>
<a href="http://user-online.blogspot.com"
target="_blank">User Online</a>
<br/><br/>
<a href="http://rohman-freeblogtemplate.blogspot.com"
target="_blank">free Blog Template</a>
<br/><br/>
<a href="http://kolom-authorized.blogspot.com"
target="_blank">Authorize service</a>
<br/><br/>
<a href="http://contoh-blog.blogspot.com/"
target="_blank">Blog D'Tree</a>
<br/><br/>

</marquee>

</td>

</tr>

</table>

Maka hasilnya akan seperti di bawah ini :

R
u
b
ri
k
E
l
e
k
tr
o
n
i
k
U
s  Blogroll dengan menu dropdown
e
r
O Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :
n
li
n <form>
e
fr
e
e
B
o
g
T
e
m <select name="menu"
p onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
l name=menu>
a
t <option> - Blogroll - </option>
e
A <option value="http://rubrik-elektronik.blogspot.com">Rubrik elektronik</option>
u
t <option value="http://user-online.blogspot.com">User Online</option>
h
o <option value="http://rohman-freeblogtemplate.blogspot.com">free blog template</option>
ri
z
e <option value="http://kolom-authorized.blogspot.com">Authorize service</option>
s
e <option value="http://contoh-blog.blogspot.com/">Blog D'tree</option>
r
v </select>
i
c </form>
e
B
l Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :
o
g
D
'
T
r
e
e
Contoh variasi lainnya :

<h3> Blogroll </h3>

<div align="left">

<select style size=5="font-weight: normal; font-size: 13px;

width="135"; font-family: Verdana,Tahoma,Arial; background-color:
rgb(229, 229, 229);"
onchange="window.open(this.options[this.selectedIndex].value,'_bla
nk')" size="1" name="menu">

<option style="font-weight: normal; font-size: 11px; color:

rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value=""
selected="selected">--Teman-temanku--</option>

<option value="http://rubrik-elektronik.blogspot.com">rubrik
Elektronik</option>

<option value="http://user-online.blogspot.com">User
Online</option>
<option value="http://rohman-freeblogtemplate.blogspot.com">Free
blog template</option>

<option value="http://kolom-authorized.blogspot.com">Authorized
Service</option>

<option value="http://contoh-blog.blogspot.com/"
target="_blank">Blog D'Tree</option>

</select>

</form> </div>

Hasilnya akan seperti ini :

Blogroll
--Teman-teman-- rubrik Elektronik User Online Free blog template Authorized Service Blog D'Tree

Sedikit clue, kata left yang berada pada kode <div align="left"> menunjukan bahwa menu
ini akan di simpan di sebelah kiri, jika mau di rubah tinggal ganti saja dengan kata "center" atau
"right".

Dan masih banyak lagi alternatif lainnya, cuma kayanya terlalu panjang nih, cukup sekian dulu yah,
untuk contoh lainnya mudah-mudahan ada sambungannya. Eh lupa, untuk cara memasukan kode
HTML di atas pada blog milik sobat, silahkan simak di sini. Selamat mencoba !