Membuat Text berjalan di Bloger

Cara Membuat Text Berjalan Di Blog

Pada postingan kali ini saya sedikit pembahasan mengenai text berjalan. Teks berjalan atau running

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.

Penulisan Kode HTML dan CSS tersebut sebaiknya ditulis dalam huruf kecil semua.Untuk lebih difahami silahkan perhatikan semua kode HTML dan CSS pada contoh-contoh berikut.

Contoh 1

Text berjalan dari kanan ke kiri
Ini Codenya
<MARQUEE align='Left'scrollamount='2' direction="left" height="50" scrollamount="2" width="480">Text berjalan dari kanan ke kiri</MARQUEE>


Contoh 2
Text berjalan dari kiri ke kanan
Ini Codenya
<MARQUEE align='Left'scrollamount='2' direction="right" height="50" scrollamount="2" width="490">Text berjalan dari kiri ke kanan</MARQUEE>

Contoh 3

Text berjalan bolak-balik dari kanan ke kiri

Ini Codenya
<marquee behavior="alternate" bgcolor="#006400" height="20px" scrollamount="5" style="color: #b6d7a8;" width="100%"><b>Text berjalan bolak-balik dari kanan ke kiri</b></marquee>


Contoh 4
Text berjalan dari Atas ke Bawah
Ini Codenya
<MARQUEE align='Left'scrollamount='2' direction="down" height="100"<br /> scrollamount="2" width="500">Text berjalan dari Atas ke Bawah</MARQUEE>


Contoh 5
Text berjalan dari Bawah ke Atas 
Ini Codenya
<MARQUEE align='Left'scrollamount='2' direction="up" height="100"<br /> scrollamount="2" width="500">Text berjalan dari Bawah ke Atas</MARQUEE>


Contoh 6

Text
berjalan Bolak- balik dari Atas ke Bawah

Ini Codenya
<span style="font-family: arial; font-size: 14px; font-weight: bold;"><marquee behavior="alternate" bgcolor="#0000ff" direction="up" height="70px" scrollamount="5" width="100%"><span style="color: #cfe2f3;">Text </span><br style="color: #cfe2f3;" /><span style="color: #cfe2f3;"> berjalan Bolak- balik dari Atas ke Bawah</span></marquee></span>

Contoh 7

Text memantul
berulang-ulang

Ini Codenya
<span <br /> style="color:#FFFFFF; font-family: arial; font-size: 14px; font-weight: <br /> bold; "><marquee scrolldelay="10" behavior="alternate" direction="up" width="100%" scrollamount="2" height="70px" bgcolor="#FF030D"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Text memantul <br /> berulang-ulang</marquee></span>


Contoh 8
| SELAMAT DATANG DI 41NKtea.BLOGSPOT.COM | | TERIMA KASIH ATAS KUNJUNGANNYA |

Ini Codenya
<marquee align="Left" bgcolor="#006400" direction="left" height="20" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="500"><b><span style="color: white;">| SELAMAT DATANG DI </span><blink style="color: white;">41NKtea.BLOGSPOT.COM</blink><span style="color: white;"> | | TERIMA KASIH ATAS KUNJUNGANNYA |</span></b></marquee>


Contoh 9
Membuat Text berjalan d Bloger
Kode warna HTML
Cara menganti Icon di Bloger
Mengganti Logo Google
Contoh- contoh Kaos PFC
Cara Memasang Musik Player pada Blog

Ini Codenya
< <marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#7FFF00" scrollamount="2" direction="up" width="100%" height="100" align="left"><a href="http://41nktea.blogspot.com/2010/04/membuat-text-berjalan-di-bloger.html">Membuat Text berjalan d Bloger</a><br/><a href="http://41nktea.blogspot.com/2010/04/kode-warna-html.html">Kode warna HTML</a><br/><a http://41nktea.blogspot.com/2010/04/cara-mengganti-icon-di-blogger.html">Cara menganti Icon di Bloger</a><br/><a href="http://41nktea.blogspot.com/2010/05/mengganti-logo-google.html">Mengganti Logo Google</a><br/><a href="http://41nktea.blogspot.com/2010/04/contoh-contoh-kaos.html">Contoh- contoh Kaos PFC</a><br/><a href="http://41nktea.blogspot.com/2010/04/tips-dan-trik_01.html">Cara Memasang Musik Player pada Blog</a><br/></marquee><br /> >


Catatan :

• #7FFF00 adalah kode keksadesimal untuk warna Hijau muda, #FF030D adalah kode  heksadesimal untuk warna merah, #FFFFFF adalah kode heksadesimal untuk warna mwrah dan seterusnya. Lebih lengkapnya dapat dilihat pada kode warna klik Di Sini.
• 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 9, <a href=" <!-- /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman";} @page Section1 {size:8.5in 11.0in; margin:1.0in 1.25in 1.0in 1.25in; mso-header-margin:.5in; mso-footer-margin:.5in; mso-paper-source:0;} div.Section1 {page:Section1;} --> http://41nktea.blogspot.com/2010/04/membuat-text-berjalan-di-bloger.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.

Selamat mencoba dan otak atik aja kode diatas agar tercipta variasi baru.hehehe....^ ^ v

Read More...