Jumat, Januari 08, 2010

Cara membuat teks berjalan di blog (marquee)

Teks berjalan yang biasa juga disebut marquee, merupakan sebuah efek gerak pada teks. Biasanya teks berjalan ini digunakan oleh pemilik blog untuk menampilkan sebuah pesan , link atau banner untuk menarik perhatian pengunjung.


Secara umum cara membuat teks berjalan di blog bisa menggunakan kode dasar html seperti di bawah ini

1. Buat teks berjalan dari kanan ke kiri (default)



Kode

<marquee> Membuat teks berjalan </marquee>

Hasil :
Membuat teks berjalan

2. Membuat teks berjalan dari kiri ke kanan (direction)

Kode:
<marquee behavior="scroll" direction="right" height="50" width="auto">Teks berjalan dari kiri ke kanan</marquee>
Hasil:
Teks berjalan dari kiri ke kanan

3. Membuat teks bergerak dengan mengatur kecepatannya (scrollamount)
Anda bisa mengubah angka 30 pada scrollamount="30"
Kode:
<marquee behavior="scroll" direction="left" scrollamount="5">Teks bergerak lambat</marquee>
<marquee behavior="scroll" direction="left" height="100" scrollamount="30" width="auto">Teks bergerak lebih cepat</marquee>
hasil:
Teks bergerak lambat
Teks bergerak lebih cepat

4. Membuat teks bergerak bolak balik / memantul saat tiba di tepi kiri atau kanan

Kode:
<marquee behavior="alternate">Teks berjalan bolak balik</marquee>

Contoh hasil-nya:
Teks berjalan bolak balik

5. Membuat teks berjalan dengan background biru
Untuk mengganti background (warna latar belakang-nya) bisa ganti kata "blue" pada kode bgcolor="blue" , warna lain bisa dilihat disini tabel warna

Kode:
<marquee bgcolor="blue" height="50" width="auto">
Teks berjalan dengan background biru
</marquee>

Contoh tampilan:

Teks berjalan dengan background biru


6. Membuat teks bergerak dari bawah ke atas

Kode:
<marquee behavior="scroll" direction="up" height="200" width="auto">
Teks bergerak dari bawah ke atas
</marquee>

untuk mengubahnya menjadi bergerak dari atas ke bawah ganti kode direction="up" menjadi direction="down"

Contoh:
Teks bergerak dari bawah ke atas


7. Membuat teks bergerak dari bawah ke atas (di dalam kotak teks)

Kode:
<div style="border: 1px solid rgb(202, 61, 217); height: 180px; overflow: auto; padding: 5px;">
<b>
<marquee behavior="scroll" scrollamount="3" direction="up"></br>
<a href="http://artikelkomputerku.blogspot.com/">Artikel Komputer</a></br>
<a href="http://www.komputerseo.com/">Komputer SEO</a></br>
<a href="http://mycomputerdummies.blogspot.com/">My Computer Dummies</a></br>
<a href="http://dummy-ku.blogspot.com/">Dummy-ku</a></br>
</marquee>
</b>
</div>

Contohnya bisa dilihat di bawah ini:


Contoh 2
Kecepatannya diubah dengan scrollamount="2" , arahnya ke bawah direction="down"


8. Membuat teks bergerak dari bawah ke atas, memantul dan berhenti jika penunjuk mouse berada di atas teks area.
Tambahkan kode: onmouseout="this.start()" onmouseover="this.stop()

Kode:
<marquee align="center" behavior="alternate" direction="up" height="300" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100">
Teks 1
Teks 2
Teks 3
</marquee>

Contohnya bisa dilihat di bawah ini :

Teks 1
Teks 2
Teks 3


Anda bisa memasukkan kode kode di atas pada teks editor blogspot,


Atau pada gadget html/javascript



Selain contoh di atas bisa juga mengatur ukuran font /teks dan warna teks mengunakan script berikut :

<marquee><font size='3' face='comic sans ms' color=yellow> Selamat hari raya Idul Fitri 1 Syawal 1431 H, Mohon maaf lahir dan batin </font></marquee>

Pada kode di atas:
a. font size='3' , angka 3 adalah ukuran teks /font bisa diubah sesuai kebutuhan
b. face='comic sans ms' , comic sans ms jenis huruf
c. color=yellow , yellow adalah warna teks.

Hasilnya :

Selamat hari raya Idul Fitri 1 Syawal 1431 H, Mohon maaf lahir dan batin


Beberapa postingan lain yang membahas tentang panduan membuat blog bisa dilihat disini cara membuat blog





Artikel Terkait :



45 komentar:

New Cars Review mengatakan...

oo gitu toh variablenya marquee..
yang no 4 bagus :-)

dunia perikanan mengatakan...

thak's atas infonya boss...!!!

Tjahaya Blog mengatakan...

good lah....
mkasih yeah...

:D

Suhendrik y4ya...! mengatakan...

Keren bos...!!

Adi mengatakan...

yah..belajar2 dan belajar yang harus saya lakukan...makasih bung...

CV.Atlas Jaya Mandiri mengatakan...

thanks bagt nih atas utilitynya yang membangun.

alga mengatakan...

thanks bang

Hadinisme mengatakan...

nice info om!!

DADI HIDAYAT mengatakan...

keren juga ya blog nya...


saya sebagai pemula mengacungkan jempol sama anda..



dan pas banget dengan apa yang saya cari...

sudah gitu ada contoh nya lagi.. cool

Arda mengatakan...

trims bgt dech, udh sy coba http://eskrimmaknyus.blogspot.com/

GIYOEL-WOPY mengatakan...

gan saya mau bikin teks gerak dari bawah ke atas kok gak bsa gimana ya gan, tolong dong pencerahanya

Artikel Komputer mengatakan...

Coba di copy script contoh 6 dan 7

Suparmin mengatakan...

Terima kasih atas informasi yang diberikan, sy menyukainya

www.bukuherbal.blogspot.com

Fauzi Abra mengatakan...

terimakasih banget bang, ilmunya sangat berguna...

Sakunt mengatakan...

thanx bgt infoNa, baguss blogNa..

putra_THB mengatakan...

Thanks ats artikelnya,sangat berguna buat saya...
salam kenal

mr.dlob mengatakan...

luar biasa atas semua sajian yang ada... matur nuwuuun... kangge panjenengan mugi2 alloh males kanti perkawis ingkang saeee...

wahyu mengatakan...

Ngopy Ya Gan.!!!
Bwt Referensi.!!!

Abenk speedle mengatakan...

thanks boss... keren ..

Musyari Aulia mengatakan...

makasi ya,, infonya sungguh bermanfaat,, ^^
mane kesini ya mas, www.musyariaulia.blogspot.com

Zulkarnain mengatakan...

sering mandar mandir di blog ini, blog yg asyik :)

humakajang mengatakan...

salam kenal mas

trims atas infonya

noveli mengatakan...

thankx ya infox

Udiee Tukang Bcanda, S.Pd. mengatakan...

nice info gan..
thanks for sharing. :)

saryadinilan mengatakan...

nice info ,di coba yah mas boleh?salam love,peace and gaul..

must jecko mengatakan...

mantap infonya gan! ane coba dulu yua...

masyonow mengatakan...

Salam kenal... mampir ya? www.masyonow.blogspot.com

agatha mengatakan...

blog'y cute juga banyak yang suka lhooooooooooo..............

Anonim mengatakan...

makasih, sangat bermanfaat.... smoga lebih banyak lagi tips2 yg bs di posting......

Shinta R. Wulandari mengatakan...

infonya sangat membantu sekali...trims, :)

Bukan Jahe Biasa mengatakan...

wah...mantap gan, udah saya coba hasilnya sukses.

Bagirmoeba mengatakan...

Thank's atas infonya,, sangat berguna sekali..

d3p3 mengatakan...

Mantap infonya, tp kalo mo membuat title blog pada browser menjadi berjalan gmn ya caranya ?Terima kasih

Salam,
d3p3
http://membuatweb123.blogspot.com
Panduan cara membuat website/blog bagi emula/blog

Gina Meliana Sabila mengatakan...

Thanks ya Informasinya..
sangat membantu...

antechno mengatakan...

wew thanks for post.. thats very help me

Ilma mengatakan...

Makasih banyak ya Bagus infonya, tapi kog tidak bisa kelihatan teksnya wat script yang naik turun itu kalo dibuka di Mozilla?

Baju Korea mengatakan...

tanks infonya,,mantep ini,,bisa di buat testimoni,,

Aldena mengatakan...

numpang sedot gan . . . sedikit aku modif cek di baretijo.blogspot.com
terima kasih blog anda referensi saya buat bangun blog semoga sukses

adzqia collection mengatakan...

Tq atas ilmunya..Langsung paten !! :)

belajar membuat website mengatakan...

Berhasill....jadi kayak dora ya, hehehe...
terima kasih bro infonya, berisi gak bertele-tele. Dan sangat bermanfaat. Mudah diterapkan juga.

Adi Daya mengatakan...

Wah, bagus banget infonya, gan ! Terima kasih, ya !

Penyuluhan BKP3 Kediri mengatakan...

Terima kasih tutorial-nya.... semoga hidup bahagia dunia - akhirat ...amin.

nurul ulum mengatakan...

WOW ! AMAZINNGG ,, bguus bangett , sangat bergunna ,, terima kasiiih banyakkk ,...:))))

Erma wati mengatakan...

makasih informasinya, jangan lupa kunjungi blog ane di http://ermawatisweet.blogspot.com

Kalimat Cinta mengatakan...

Akhirnya Nemu Juga Caranya Gan... Terus Berkarya... Thanks