Cara Membuat Tulisan Berjalan

Cara Membuat Tulisan Berjalan


Mungkin diantara anda ada yang ingin tau Bagaimana Cara membuat tulisan berjalan - atau tulisan yang bisa bergerak kekanan/kekiri dan keatas/kebawah ? .Tulisan ini saya bikin saat saya dulu mencoba membuat beberapa tulisan di blog saya bisa bergerak keatas atau kekanan.

Dan saya berfikir : Jika saya saja dulu bingung cara membuat tulisan bergerak,maka pasti banyak juga orang lain yang juga tidak tau caranya.Oleh sebab itu saya mencoba menuliskan artikel cara membuat tulisan bergerak ini ,khusus untuk anda yang belum mengetahui nya.

Apa sih tujuan atau manfaat Tulisan Yang bisa berjalan di Blog?

Saya melihat dibeberapa blog,menggunakan teknik tulisan bergeser kekanan atau kekiri  untuk menarik perhatian pengunjung (dan memang teknik ini mampu membuat saya melirik ke tulisan yang berjalan tsb).

Meskipun ada webmaster guru, yang menghindari trik tulisan berjalan ini ,dengan alasan : "Membuat Pusing..!" . Tapi menurut saya trik ini memang cukup ampuh kok. Agar tdk membuat pusing sebagian orang tertentu ( Ada lho beberapa org yang memliki gangguan penglihatan pada barang/tulisan/objek yang bergerak2..), kita bisa membuat tulisan yang bergerak tsb untuk diam sesaat ketika kursor mouse diarahkan ke tulisan bergerak itu. -- Lihat aja yah contohnya dibawah. --

Mana sih Contoh Tulisan Berjalan Di blogspot


Bergerak kekanan ! cara membuat tulisan berjalan di blog

Bergerak kekiri ! cara membuat tulisan bergerak

Ke Kanan dan Kekiri ? - cara membuat tulisan bergerak

Bergerak kekanan Perlahan !

Ke Kanan dan Kekiri Dan Bisa Di stop??


Bergerak Ke Atas



Bergerak Ke Atas dan Ke bawah


Tulisan bergerak atau MARQUE ini, pada beberapa pengaturannya : Misal : align;behavior;haspace; dll :  ada yang tidak kompatible ( tidak berfungsi ) di beberapa browser,terutama di browser kuno.Untuk melihat semua fungsi marque berfungsi semua fitur2 nya, coba buka blog yang ada marque nya dengan mozila firefox

Lalu mana Kode HTML Tulisan Berjalan nya ?


Oke ini kode nya :

Kode HTML Untuk Tulisan Yang bergerak kekanan

<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan Bergerak Bergerak kekanan (ganti dgn tulisan anda)</span></marquee>

Kode HTML Untuk Tulisan Yang Bergerak kekiri : Lihat pada kode tulisan bergerak kekanan diatas,tinggal ganti kata "right" menjadi "left"


Kode HTML Untuk Tulisan Yang Ke Kanan dan Kekiri

<marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri (ganti dgn tulisan anda)</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak kekanan Perlahan : Note : nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.Direction = menentukan arah bergerak

<marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Bergerak kekanan Perlahan (ganti dgn tulisan anda</span></marquee>


Kode HTML Untuk Tulisan Tulisan Yang Bisa Bergerak  Ke Kanan dan Kekiri Dan Bisa Di stop

<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop??</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak Ke Atas

<marquee align="center" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak Ke Atas dan Ke bawah

<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas dan Ke bawah</span></marquee>

Note : Anda bisa merubah warna tulisan dengan kode warna HTML :

red = warna merah
blue= warna biru
yellow = warna Kuning
white = warna putih
black = warna hitam

Kode warna HTML, pada contoh diatas seperti ini:

<span style="color:red; font-weight: bold;">

Bisa diganti dengan seperti ini :

<span style="color:#f00; font-weight: bold;">

#f00; = warna merah ;

#00f; = Warna Biru ;

#0f0; = Warna Hijau ;

#f0f; = Warna Ungu ;

Atau dikombinasi....Coba-coba aja ya....

Update 25 agustus 2009:
Karena ada pertanyaan soal bagaimana cara agar gambar bisa bergerak kekanan atau kekiri, maka sy perlu tambahkan sedikit disini ...

caranya pertama anda bikin dulu image yang anda inginlan, lalu anda upload image tsb ke situs layanan penyimpan image gratis,misalnya photobucket.com.

Kemudian nanti dari photobucket anda akan mendapatkan URL dari image yg anda upload tsb.
Kemudian masukkan ke dalam scrip marquee(Berjalan) seperti yg ada diatas.
Berikut contoh script utk image Photo saya yg bergerak Ke kanan :

<marquee direction="right">
<img src="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg" /></marquee>

Dan ini contoh image yg bisa bergerak kekanan


ganti URL http://i420.photobucket.com/albums/pp281/goldenphoto_2009/bubble.gif dgn URL image milik anda

UPDATE OKTOBER 2011

Untuk cara dan dimana penempatan kode teks berjalan ini, silahkan lihat di postingan ini :
menempatkan tulisan berjalan diblog

Semoga membantu

73 komentar:

  1. Anonim,Band comunity , Masyhudi , Irada :
    Sama-sama terimakasih..senang bisa bermanfaat buat sesama

    Salam

    BalasHapus
  2. kenapa aku nggak bisa bikinnya ya....?

    BalasHapus
  3. thanks ya bro, akhirnya yg kucari ada di sini.
    terus berkarya mas. Cba liat hasi percobaanya ya mas disini :
    http://ancispengelana.blogspot.com/
    tolong kas komentarnya ya mas.........

    BalasHapus
  4. MAKASIH YA MAS UDAH MAMPIR KE BLOGKU

    BalasHapus
  5. Usrek:
    Halo..salam kenal...coba anda tulis scriptnya pada opsi "edit HTML"....jangan di opsi "compose" tapi kenapa yg tulisan bergerak keatas dan kebawah bisa ya..?

    BalasHapus
  6. mantap mas...

    makakasih banyak yach...

    tapi koq blog saya ga muncul yach kalo saya cari lewat google..

    gmn cara buat munculinnya yach mas....

    thnks before....

    BalasHapus
  7. Burhan : Coba anda ketik di browser:
    site:namadomainanda.com

    BalasHapus
  8. Akhirnya ketemu juga yang aku cari.......... makasih banyak komandan..... salam bloger indonesia...... Nando Nasawewe Doke.......

    BalasHapus
  9. mas yang pakai kotak misal warna putih tulisan merah gimana ya

    BalasHapus
  10. Indra n:
    Dicoba pakai tabel aja. contohnya gini :
    <table align="centre" border="1" bordercolor="#ffffff" cellpadding="5" cellspacing="5" width="60%"><tbody><tr><td><span style="color: rgb(255, 0, 255); font-weight: bold;">Table Dengan Border Putih</span>
    </td></tr></tbody></table>

    BalasHapus
  11. mas terima kasih atas jawabannya, tapi maksudnya kalau background kotak putih tulisan merah terus jalan ke kiri atau kekanan, yang mas kasih kodenya tidak bisa jalan

    BalasHapus
  12. Indra : caranya pertama anda bikin dulu image berbentuk kotak dgn background putih dan warna tulisan merah, lalu anda upload image tsb ke photobucket.com
    Kemudian nanti dari photobucket anda akan mendapatkan URL dari image yg anda upload tsb.
    Kemudian masuukan ke dalam scrip marque(Berjalan) seperti yg ada diatas.
    Berikut contoh utk image bubble(gelembung) yg bergeraK Kekanan;
    <marquee direction="right"><img src="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/bubble.gif" /></marquee>

    ganti URL http://i420.photobucket.com/albums/pp281/goldenphoto_2009/bubble.gif dgn URL image milik anda

    semoga membantu

    BalasHapus
  13. thanks mas saya coba dulu

    BalasHapus
  14. mas klo tulisannya di perbesar bisa ga mas ?

    makasih

    BalasHapus
  15. Anonim:
    Kalau mau diperbesar,tinggal tambahin kode
    <span style="font-size:130%;">
    sebelum kode
    <span style="color: rgb(255, 0, 0); font-weight: bold;">
    Angka 130% atau lebih akan membuat huruf membesar

    BalasHapus
  16. Kok yang gambar itu ga bisa ya, itu masukinnya ke gadget gambar ataw apa si mas??

    regard :)

    BalasHapus
  17. Yth Claznezious Santi Sacredly:
    Jadi gambarnya kita upload dulu ke photobucket.com (daftar dulu kephotobucket.com lalu mulai kita upload deh gambar kita ke photobucet) trus nanti dari gambar yg kita upload tsb, kita akan mendapatkan alamat gambar nya (URL gambarnya )darib photobucket. nah URL gambar ini yang kita masukkan didalam barisan kode HTML utk gambar berjalan tsb...

    Soal penempatan bisa di bagian gadget di sidebar ataupun didalam body artikel. Kalau mau ditempatkan di bagian sidebar..caranya masuk ke dashbor lalu ke layout lalu ke add element lalu klik "ADD gadget" lalu pilih yg "HTML+Javascript"

    Demikian semoga membantu

    BalasHapus
  18. bagus sekali bro... semoga menjadi ilmu yang bermanfaat..

    BalasHapus
  19. Mas Bahrul , script ini bisa ngak sih dipasang di wordpress..? aq coba pasang di WP koq gak jalan ya..kalo bisa dipasang dimana mas? aq kmrn coba di edit HTML jg tuh..

    Makasih mas Bahrul

    BalasHapus
  20. Anonim:
    Kalo di wordpress.com (Versi yg gratisan)ndak bisa..soalnya ndak di izinkan sama mbah wordpress nya...

    BalasHapus
  21. Mas bahrul, nanya terus nih.. kalo WP berbayar kita pasang dimana? kasih tahu dong mas lebih rinci aq mau nyoba ke WP yg berbayar,kira2 space nya cpt habis gak mas kalo pake huruf berjalan ini ...terimakasih banyak deh..atas share ilmunya..

    BalasHapus
  22. Juragansopwar:
    Sama-sama kang Juragan..

    BalasHapus
  23. Anonim diatas Juragan software :

    Terserah mau dipasang dimana aja bisa kok , jika misalnya mau dipasang di sidebar , tinggal ke bagian widget-->Text-->pastekan kode2 yg ada diatas itu.

    Jika mau dipasang dibagian halaman posting...caranya juga sama...tinggal paste aja

    BalasHapus
  24. waduh keren skali yo mas...... good dah pokok nya hehheh

    BalasHapus
  25. Wong plumpang: Good juga dahhhh ^_^

    BalasHapus
  26. MAKASIH,,,,TAs TIpsnya,,,

    BalasHapus
  27. Bos Mau Nanya Kalau nyari marque untuk aktifkan tulisan dimana yach...sorry bos blog baru www.rimajasa.blogspot.com

    BalasHapus
  28. thanks yah mas atas tutorialnya...

    BalasHapus
  29. Maantab betul bro tutorialnya, thankyu3.....

    BalasHapus
  30. ok mkcih om..... posting ono sangat membantu sy tuk tau lebih banyak tentang blogger.....

    BalasHapus
  31. Kalau tulisan yg bergerak keatas terus atau kebawah terus sampai ilang dan muncul lagi disebaliknya gimana ya Mas..?
    Tksh.

    BalasHapus
  32. wah.... ternyata yang ku cari selama ini dapat juga.........
    makasih bro.....
    terus berjuang....

    BalasHapus
  33. itu kodenya terus diapain?? ditaruh mana??

    BalasHapus
  34. Kepada Mas"mojo pak tua" : Wah iya ya.. kodenya mau ditaruh dimana gitu ya ? Jadi gini lho pak, kode2 tsb , biasanya serig kita gunakan untuk menampilkan suatu tulisan yang kita aggap penting, Misalnya tulisan " Selamat datang wahai Tamu" yang kita pasang sebaai widget diatas kotak posting , atau di samping halaman sidebar... tinggal pergi ke dashbor-->Design(layout)--->Tambah GAdegt--->Html/Javascript--->masukkan kode diatas..
    Selamat Mencoba pak mojo pak tua
    Bahrul Ulum

    BalasHapus
  35. saya mencoba untuk menambah kalimat berjalan, tapi yg saya dapat malah pemberitahuan semacam ini: Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "direction".

    BalasHapus
  36. Kpd : Pak Hari Tri Atmojo,
    Mungkin bapak masangnya bukan sebagai widget/Gadget ya ? Kalau langsung dipasang di Editor HTML layout ,memang tidak bisa pak. Jadi caranya begini :
    Masuk ke Dashbor ---> ke Design(atau layout) --> lalu ke Add element--> HTML/Javascript --> dan Masukkan kode2 Tulisan berjalan diatas

    BalasHapus
  37. oh ya gimana caranya kalau gambarnya banyak.?

    BalasHapus
  38. To Mas Abdul Muklis Jaelani,
    Sama kok,,, tinggal masukkin semua alamat URL gambar, kedalam barisan kode2 itu aja

    BalasHapus
  39. Q nga ngerti, setelah di kopy, terus di save d mana//??

    BalasHapus
  40. wat ngrubah sizenya maz gmna caranya??

    BalasHapus
  41. mas kalau udah di copy, terus di pastenya dimana mas ? kok di edit html ndak bisa ya ? :o

    BalasHapus
  42. makasih buat tipsnya tapi kok tulisannya kecil yaa cara besarinnya gimana

    BalasHapus
  43. mas harus di upload dulu yah baru jadi ...

    BalasHapus
  44. Thanks bgt buat Tips cara buat Tulisan Berjalan sob. Bagus i like

    BalasHapus
  45. thanks gan...punyaku aku ganti baner yang berjalan...

    BalasHapus
  46. Om.. Naroo nya di mna,, yeh kalo boleh tau..? di html/java script app edit html. ?


    Mohon Jawaban nya.. :D

    BalasHapus
  47. akhirnya ketemu juga tutorialnya, apakah ini bisa dipasang di widget ?

    BalasHapus
  48. penulisanya penulisan sintak html ya di letakan di mana???

    BalasHapus
  49. aku gabisa2 :( nyari layout dimana? di dasbor adanya ini doang: ikhtisar, post, laman, komentar, startistik, tata letak, template, stelan. cari layout nya dimana om ?

    BalasHapus
  50. To Tiɑrɑ Яɑmadђɑπi :
    Layout itu bahasa Inggrisnya.
    Bahasa Indonesianya : Tata Letak
    NIh saya terjemahin ya semuanya :
    Inggris= Indonesia
    Overview=ikhtisar,
    Posts=post
    Pages =laman,
    Comments=komentar,
    Stats=startistik,
    Layout=tata letak,
    Template=template,
    Settings=stelan

    BalasHapus
  51. Terimakasih Ya Mas, Tutorial ini sangat membantu Blog kami KOMED(KOmunitas Online Mahasiswa Geografi Universitas Negeri Medan. Salam hangat dari kami...

    BalasHapus
  52. thnk gan website sy jdi kereeeeen

    BalasHapus
  53. to http://universityofbloggers.blogspot.com .follow sukses.Follback ya http://sejarahpaser.blogspot.com thanks.

    BalasHapus
  54. SY SANGAT BINGUN DI BLOGGER SY MAU PASANG TULISAN BERGERAK TAPI ? TRIMS

    BalasHapus
  55. MAS KALO POTONYA LEBIH DARI SATU BISA G YA
    BLS Y MAS KE blog saya
    www.godangisina.blogspot.com

    BalasHapus
  56. Makasih banget , ternyata foto bisa lebih dari satu

    BalasHapus
  57. Sekarang saya jadi bisa membuat tulisan menjadi berherak di blog saya
    terima kasih atas infonya mas dan sukses buat anda..

    BalasHapus
  58. hmmm... trnyata gmpang bnget buat teks brjalan di blog, trims infonya.

    BalasHapus
  59. klo yg jalan keatas tulisanya lngsung banyak gmn mas ? thx

    BalasHapus
  60. Misalnya mau beberapa tulisan, berjalan ke atas, biar ada spasi antar tulisan bagaimana?

    BalasHapus
  61. klu buat yang bisa nomor urt gimn ya?/
    sebagai contoh :
    1. nama 1
    2. nama 2
    3. nama 3
    4. ampe seterusnya...
    mohon pencerahannya

    BalasHapus
  62. sudah dipraktekkan gan untuk widget testimonial, mantap .....

    BalasHapus
  63. Salam...mohon informasi bagaimana untuk memperbesar ukuran font shg teks bisa terbaca dengan jelas...terima kasih

    BalasHapus
  64. Ternyata mudah ya membuat teks berjalan.

    BalasHapus
  65. bagaimana cara mengganti fontnya ?

    thx

    BalasHapus
  66. kalau hurufnya biar gede gimana? thanks

    BalasHapus
  67. trimakasih artikelnya, salam hormat dari LPPL radio publik mimika papua

    BalasHapus
  68. keren mas... anda jenius ya bisa buat scrip berjalan,,,, salam sukses buat anda mas,,, jgn lupa kunjungin blog kami...

    BalasHapus
  69. mas, mau nanya, itu kan yg bergerak ke kanan itu nunggu tulisannya habis baru ngulang lagi, gimana caranya biar dia lgsg ngulang tanpa nunggu tulisannya habis, jadi gak terputus gitu mas...
    mohon bantuannya.
    terima kasih.

    BalasHapus
  70. gimna cra na biar beground'a berwarna?

    BalasHapus

Saya berterimakasih atas koment anda yang Sopan dan Ramah...
Sebelum kasih komentar,sebaiknya lihat Contoh komentar spam disini , Agar komentar anda tdk tertangkap oleh spam filter blogger.