Selasa, 31 Mei 2011

Cara Membuat Tulisan Berjalan [Marquee]

K
etika Anda membaca salah satu artikel, di bagian bawah di atas kotak komentar pastinya Anda bakal melihat tulisan berjalan berwarna putih dengan background hijau. Dan pastinya Anda juga bertanya, kok bisa yaa tulisannya berjalan..?? hehe5.. Tujuan adanya tulisan berjalan ini tentunya kita semua sudah banyak yang tahu, apa lagi kalau bukan untuk mempercantik tampilan blog kita, yaa kan..!!

Nah.., kali ini saya akan membuat membuat tulisan atau postingan tentang bagaimana cara membuat tulisan berjalan di postingan, widget ataupun menempel pada template Anda. Mungkin beberapa dari Anda sudah penasaran kan. Berikut cara pembuatannya :

[1]. Login ke Blogger
[2]. Kemudian klik Tata Letak dan Elemen Halaman
[3]. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
[4]. Lalu pilih HTML/JavaScript
[5]. Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

A. Tulisan Berjalan Dari Kanan Ke Kiri

Kode :
<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="left" scrollamount='3'><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</marquee></div>
Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS


B. Tulisan Berjalan Dari Kiri Ke Kanan

Kode :
<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="right" scrollamount='3'><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</marquee></div>
Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS


C. Tulisan Berjalan Bolak-balik

Kode :
<div cols='45' rows='1' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="left" scrollamount='3' behavior="alternate"><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></marquee></div>
Hasil :

HARIO PAMUNGKAS

HARIO PAMUNGKAS


D. Tulisan Berjalan Dari Atas Ke Bawah

Kode :
<div cols="45" rows="5" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background-color: #5fb404; border: 1px double rgb(95, 180, 4); color: white; font-size: 16px; line-height: 1.1em; padding: 5px;">
<marquee align="center" direction="down" scrollamount="3"><center><span style="font-family: Gruppo;">HARIO PAMUNGKAS</span></center></marquee></div>
Hasil :

HARIO PAMUNGKAS


E. Tulisan Berjalan Dari Bawah Ke Atas

Kode :
<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3'><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></div>
Hasil :

HARIO PAMUNGKAS


F. Tulisan Berjalan Naik-Turun

Kode :
<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></div>
Hasil :

HARIO PAMUNGKAS


G. Tulisan Berjalan Zig-Zag Tembus

Kode :
<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate" ><marquee direction="right"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></marquee></div>
Hasil :

HARIO PAMUNGKAS


H. Tulisan Berjalan Zig-zag Mantul

Kode :
<div cols='45' rows='5' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><marquee direction="right" behavior="alternate"><center><span style='font-family:Gruppo;'>HARIO PAMUNGKAS</span></center></marquee></marquee></div>
Hasil :

HARIO PAMUNGKAS


I. Gambar Berjalan Zig-zag Mantul

Kode :
<div cols='45' rows='7' style='border: 1px double #5FB404; padding: 5px; background-color:#5FB404; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.1em;font-size: 16px; color: #ffffff;'> <marquee direction="up" scrollamount='3' behavior="alternate"><marquee direction="right" behavior="alternate"><a href="http://hariopamungkas.blogspot.com/" target="_blank"  title="Hario Pamungkas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXFjlLNV0TaelIGjSEx0ecbSX0_aEQzHMLBJ0PUvYlGrtF7ZG5c6Sg-Xv1Jx6nJOtmC1w2-5eV2p-0pKViruCaLHcMzr__LnwLjEqfB20T4aqMqAC4ZYv4rie9CmQskhC3B-cDMxhQEs/s1600/banner+aku2.png" alt="Hario Pamungkas"/></a></marquee></marquee></div>
Hasil :

Hario Pamungkas

Catatan :

direction="left/right/up/down" --> mengatur arah gerakan teks.
scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
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
Jika ingin menghapus background, tinggal hapus saja background-color:#5FB404; pada kode di atas.
Jika ingin mengganti tulisan "HARIO PAMUNGKAS" dengan gambar seperti pada contoh terakhir, silahkan ganti tulisan tersebut dengan kode sumber gambar yang ingin Anda tampilkan, contoh : <a href="http://hariopamungkas.blogspot.com/" target="_blank" title="Hario Pamungkas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUXFjlLNV0TaelIGjSEx0ecbSX0_aEQzHMLBJ0PUvYlGrtF7ZG5c6Sg-Xv1Jx6nJOtmC1w2-5eV2p-0pKViruCaLHcMzr__LnwLjEqfB20T4aqMqAC4ZYv4rie9CmQskhC3B-cDMxhQEs/s1600/banner+aku2.png" alt="Hario Pamungkas"/></a>

Nahh.. di atas ada berbagai macam contoh tulisan atau gambar berjalan. Jika Anda ingin mempercantik blog Anda dengan tulisan berjalan, alangkah lebih baiknya Anda mencobanya, hehe5..

Selamat mencoba yaa dan semoga bermanfaat...

6 komentar:

  1. wah, ga nampak hasilnya, soalnya ol via hp. :D ntar deh saya mau coba kecil2an. he....

    BalasHapus
  2. @ obinhut
    Oke..
    Selamat mencoba dan semoga berhasil, bro..
    Semangat...!! hehe5..

    BalasHapus
  3. top markotop....!!!!! siiip pak....

    BalasHapus
  4. ko' tulisan hario pamungkasnya masih nampang aja, padahal udah diganti pake namaku, apa yg salah ya??

    BalasHapus
  5. @ Anonim
    Hhmmm..
    Jadi penasaran saya..
    Mungkin lebih baik Anda copas kode yang Anda buat di kolom komentar ini, biar saya tahu persis permasalahannya.
    Tapi logika saya ketika nama "Hario Pamungkas" diubah, tentunya di halaman blog Anda juga pasti berubah, karena pada kode tersebut tidak saya sisipkan link atas nama saya, hehe5..

    BalasHapus


Facebook Comment Box : "Silahkan berikan komentar Anda mengenai tampilan dan isi blog saya ini untuk membangun blog ini jadi lebih baik lagi . . ."