Teks Berjalan (Running Text)
Pada postingan kali ini saya hanya akan menyempurnakan pembahasan sebelumnya mengenai text berjalan dan text berkedip dengan HTML. Sebelum melangkah lebih jauh cara penulisan teks berjalan dengan HTML, ada baiknya saya jelaskan beberapa fungsi dari kode HTML yang terkait:
Cara penulisan teks berjalan harus diawali dengan tag <marquee> dan diakhiri dengan </marquee>. Marquee sendiri memiliki beberapa atribut diantarnya :
- Width : berfungsi untuk menentukan ukuran lebar yang nantinya akan diapakai sebagai ruang teks berjalan. (dalam satuan pixel atau persen).
- Height : berfungsi untuk menentukan ukuran tinggi ruang teks berjalan. (dalam satuan pixel atau persen).
- Direction : berfungsi untuk menentukan arah gerakan teks (left : teks berjalan ke arah kiri, right : teks berjalan ke arah kanan, up : teks berjalan ke arah atas, down : teks berjalan ke arah bawah.)
- Bevaior : berfungsi untuk mengatur gerakan teks terdiri dari 3 attribute yaitu (alternate : teks bergerak bolak balik, slide : teks bergerak satu arah dan hanya sekali setelah itu berhenti, scroll : teks bergerak satu arah berulang-ulang).
- Color : berfungsi untuk mengatur warna teks (ditulis dalam kode hexadecimal tetapi untuk warna dasar bisa ditulis langsung sesuai nama warna dalam bahasa Inggris). Sebaiknya pelajari dulu mengeni kode warna.
- Bgcolor : berfungsi untuk mengatur warna background (dalam hexadecimal atau untuk warna dasar bisa ditulis langsung sesuai nama warna dalam bahasa Inggris).
- <font face="kode HTML> ...... </font> : berfungsi untuk mengatur jenis font, warna font, ukuran font, dan sebaginya. Antara kode HTML dipisahkan dengan spasi)
- <span style="kode CSS"> ...... </span> : berfungsi untuk menyisipkan kode CSS di dalam HTML. Jika menggunkanan style maka atribut-atribut CSS dapat diterapkan di sini contohnya font-size : untuk mengatur ukuran font, font-weight: untuk mengatur ketebalan font, color : untuk mengatur warna font, dan sebagainya, penulisan kode CSS tersebut harus dipisahkan dengan tanda titik koma(;).
- Scrolldelay : berfungsi ntuk mengatur waktu tunda (delay) gerakan dalam satuan mili detik (ms).
- Scrollamount : berfungsi untuk mengatur kecepatan gerakan dalam satuan pixel.
- Loop : berfungsi untuk mengatur jumlah looping (pengulangan).
- Onmouseover="this.stop ()" : berfungsi untuk menghentikan teks berjalaan ketika mouse mendekat.
- Onmouseout="this.start ()" : berfungsi untuk membiarkan teks berjalan lagi ketika mouse menjauh.
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 :
Tampilan setelah diposting :
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 :
Tampilan setelah diposting :
Contoh 3 :
Kode HTML untuk membuat teks berjalan bolak-balik dari kan ke kiri dengan huruf verdana, bold, warna kuning, ukuran huruf 14px, tinggi area 20px, lebar area 100% di atas backgroud biru adalah sebagai berikut :
Tampilan setelah diposting :
Contoh 4 :
Kode HTML untuk membuat teks berjalan 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 :
Tampilan setelah diposting :
Contoh 5 :
Kode HTML untuk membuat teks berjalan dari bawah ke atas berulang-ulang dengan huruf arial, bold, warna kuning, ukuran huruf 14px, tinggi area 70px, lebar area 100% di atas backgroud merah adalah sebagai berikut :
Tampilan setelah diposting :
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 merah adalah sebagai berikut :
Tampilan setelah diposting :
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 :
Tampilan setelah diposting :
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 :
Tampilan setelah diposting :
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 :
Tampilan setelah diposting :
Contoh 10 :
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 :
Tampilan setelah diposting :
Catatan Penting :
- #FFFF00 adalah kode keksadesimal untuk warna kuning, #FF0000 adalah kode heksadesimal untuk warna merah, #FF0000 adalah kode heksadesimal untuk warna mwrah dan seterusnya. Lebih lengkapnya dapat dilihat pada artikel sebelumnya mengenai kode warna.
- Font-family : untuk menentukan jenis huruf seperti Arial, Verdana, Georgia dan lain-lain.
- Font-size : untuk mengatur ukuran huruf dalam satuan pixel (px) atau em.
- Pada Contoh 10, <a href="http://www.linksukses.com/2010/01/penggunaan-id-dan-class.html">Penggunaan ID dan CLASS</a><br/> kode dengan warna merah bisa diganti dengan URL milik anda dan title yang sesuai dengan URL tersebut.
- Font-Weight : untuk menentukan ketebalan huruf (bisa disi dengan angka 100, 200,...800, atau dengan bold).
- Scrolldelay : diisi dengan angka untuk mengatur kecepatan gerakan.
- Width untuk space teks berjalan dapat ditulid dengan angka (pixel/px) dan dapat juga dengan menggunakan persentasi (%) yang nantinya akan menyesuaikan dengan lebar wrapper atau layout postingan blog anda.
31 comments:
hohoh menarik menarik.....
tapi kalo iklannya yg lari ke sini sana... bisa gak kak??
biar lebih banyak yg klik gituu... XD
mampir balik ke blogku yah
http://tinyurl.com/y953n4m
Mo ke TKP...belajar huruf,,,,thanks....Bos ...klu ada waktu mampir ke blog saya...yang masih standar !!!
trims banget atas informasinya....
artikelnya bagus...siip, btw tukeran link ya...saya pasang banner blog ini nanti mampir ke blog saya utk copy banner....thx
..sama-sama, mas...ajari saya bikin link, maklum pemula...
tak pasang ni tutorial..heheheh..thx boss...sedap....
menarik sekali ... thanks bt infonya/
kalau mau buat teks berjalan di atas web gmn..maksudnya waktu scroll teks nya tetap masih tampak...seperti selalu di atas gitu
terina kasih infonya mas!
wahh Guamblang sekali tutorialnya...
Thanks.
terima kasih,sharing ilmunya gan,semoga sukses
bagus sekali infonya, terima kasih mas
mampir ya di blog saya http://sasai-usai.blogspot.com/
Makasih kode html nya kang... aku copy
Thx BGT boz buat literaturx
Sangat bermanfaat sekali buat Q.
Terimakasih Gan..
Blog ny bagus,, and artikel nya menambah pengetahuan..
Jangan lupa ke blog saya Gan
http://aneh92.blogspot.com/
Terima kasih infonya sangat bermanfaat. Kini blog http://rumahsedekahsahabat.blogspot.com sudah ada running teksnya
trimkkasih mas,artikelnya bermanfaat bangt.....
wah mantap om tutorial nya... keep posting
perlu di pelajari lagi ,dan sebagai hal baru ni ilmunya,tq
@All : Semoga bermanfaat. Mohon mohon koreksinya!
Thk's utk informasi yg diberikan. Saya salut utk anda, semoga LINK SUKSES tetap kreatif berbagi ilmu bagi anak bangsa.
mantap gan, sy udah coba...
hasilnya:
http://www.nurdiansyah-romdon.co.cc/2011/06/senandung-lirih.html#more
sy newbie bloger,, mohon bantuan saran dan kritik..!!!
Tonida@ kalau mau buat teks berjalan di atas web gmn..maksudnya waktu scroll teks nya tetap masih tampak...seperti selalu di atas gitu
Tutornya bermanfaat sekali
Pertanyaan saya sama dengan mas Tonida giaman buat tex berjalan di footer tapi pada saat di scroll tex.x tetap berada di tempatnya.
thanks ya mas bro sempatkan untk ngunjugi blog saya mas http://www.sangrilla.web.id
@Aswar : Coba deh dilihat di http://dhedie-tips-triks.blogspot.com/2009/02/membuat-text-melayang-pada-blog.html Mungkin yang dimaksud seperti itu.
Oke Mas Bro Info Nya, kapan2 mampir mas bro hehehehehehhehe,punya ilmu to harus saling berbagi biar dapat pahala yg banyak sok tq.
Bermanfaat, mantap dan lengkap. Thx
Sip Gan... info sangat bermanfaat... Thank's.
Alhamdulillah, akhirnya blog saya jadi juga mas.
Salam dari www.justforbrilliant.blogspot.com, ~ıuıs ıp ɐpɐ uıʞƃunɯ ɐpuɐ ısɐɹıdsuı~
sungguh berguna buat saya yang sangat awam dengan kode HTML terimakasih gann...
keren infonnya gan,,,btw ada yg tau cara bikin running texs indoor/outdoor yg biasa bwt iklan2 gitu,,sekalian sama softwarenya,,ato mungkin ada yg tau tempat saya bisa belajar/kursus,,saya mo bikin riset,,,
Thxs
hadita_4ever@yahoo.co.id
@hadita[at]yahoo.con: Mengenai teks berjalan untuk iklan dapat dicari di Google kategori elektronka digtal dan micro controller atau dengan menulis kata kunci "Runing Led" atau "Elektronic Running Led".
Saya sendiri menyukai hal itu dan pernah mempelajarinya melalui software simulation elektronika. Rekan Hadita juga dapat mencoba software elektonka tersebut.
Semoga dapat membantu.
Thanks.
Poskan Komentar
Mohon maaf jika saya terlambat atau tidak dapat me-reply komentar Anda. Terima kasih.