September 11, 2012

Cara Membuat Running Text/Teks Berjalan di Blogspot

Running-Teks-Blog
Laurencius, Cara Membuat Running Text/Teks Berjalan di Blogspot. Teks berjalan, atau running text bagi sebagian blogger masih diperlukan untuk memberikan perhatian khusus apa itu berupa pesan, kata sambutan ataupun yang lainnya.

Memang benar sekarang ini sudah banyak situs penyedia pembuatan animasi yang jauh lebih baik, namun Kali ini kita akan mencoba membuat secara manual dengan mempelajari sedikit Kode HTML dan CSS.

Cara penulisan teks berjalan diawali dengan tag <marquee> dan diakhiri dengan </marquee>.

Penulisan Kode HTML dan CSS tersebut sebaiknya ditulis dengan mengunakan huruf kecil semua. Untuk lebih jelasnya silahkan diperhatikan semua kode HTML dan CSS pada contoh yang kami berikan.

Marquee sendiri memiliki beberapa atribut diantaranya :

      • Width : berfungsi untuk menentukan ukuran lebar yang nantinya akan dipakai 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 secara 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) 
      • 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 menggunakan 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 untuk 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).

Contoh 1 :
Kode HTML untuk membuat teks berjalan dari arah kanan ke kiri dengan huruf arial, bold, warna kuning, ukuran huruf 20px, tinggi area 25px, lebar area 100% di atas backgroud biru adalah sebagai berikut :

<span style="font-family:arial; font-size: 20px; font-weight:bold; color:#ffff00;"> <marquee direction="left" scrollamount="5" height="25px" width="100%" bgcolor="blue" >Selamat Datang Di Blog Laurencius</marquee></span>

Hasilnya Seperti :

Selamat Datang Di Blog Laurencius


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="5" height="20px" width="100%" bgcolor="#ffff00" >
Selamat Datang Di Blog Laurencius</marquee></span>

Hasilnya Seperti :

Selamat Datang Di Blog Laurencius


Contoh 3 :
Kode HTML untuk membuat teks berjalan dari atas ke bawah huruf arial, bold, warna hijau, ukuran huruf 14px, tinggi area 70px, lebar area 100% di atas backgroud abu-abu adalah sebagai berikut :

<span style="color:#1fd846; font-family: arial; font-size: 14px; font-weight: bold;"> <marquee bgcolor="#f0f0f0" direction="down" height="70px" scrollamount="5" width="100%"><center>Selamat Datang Di Blog Laurencius</center></marquee></span>

Hasilnya Seperti :

Selamat Datang Di Blog Laurencius



Contoh 4 :
Kode HTML untuk membuat teks berjalan dari bawah ke atas berulang-ulang posisi center dengan huruf Edwardian Script ITC, bold, warna biru, ukuran huruf 20px, tinggi area 70px, lebar area 70% di atas backgroud Pink adalah sebagai berikut :

<div style="text-align: center;"><span style="color:#0000ff; font-family: Edwardian Script ITC; font-size: 30px; font-weight: bold;"><marquee bgcolor="#f37efc" direction="up" height="100px" scrollamount="5" width="70%"><center>Selamat Datang Di Blog Laurencius</center></marquee></span></div>
Hasilnya Seperti :

Selamat Datang Di Blog Laurencius

Demikian Beberapa Contoh Running text yang dapat kita terapkan pada blog kita, untuk warna bisa menggunakan Kode warna HTML yang telah kami siapkan.

Dengan sedikit kreatifitas kita dapat merubah tampilan dari Running Text sesuai dengan keinginan. Selamat Mencoba Semoga Manfaat.

Related Posts

Cara Membuat Running Text/Teks Berjalan di Blogspot
4/ 5
Oleh :

11 comments

kalau yg sukakanya boleh buat ni, lagipun dapat mencantikkan blog sekali kan?

keren sob.., gk nyangka ternyata carax simple banget ya.., thx ilmux ya *smile

wah wah keren nih running textnya sobat...

kalo saya running text nya di tabnya kang#smile

@KY
Iya KY buat Blog kita jadi Menarik.


@Rohis Facebook
Simple dan bisa di modif dengan yang lain teman

@Asis Sugianto
Bisa aja nih Sobat.


@cak oni
Makasih Teman

kembali berkunjug sob.! *smile

@Rohis Facebook
Makasih Teman.

keren abis jadi pingin nyoba nich

indah infonya follback yah

keren gan makasih ya