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

77 comments:

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

    Salam

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

    ReplyDelete
  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.........

    ReplyDelete
  4. MAKASIH YA MAS UDAH MAMPIR KE BLOGKU

    ReplyDelete
  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..?

    ReplyDelete
  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....

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

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

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

    ReplyDelete
  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>

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  13. mas klo tulisannya di perbesar bisa ga mas ?

    makasih

    ReplyDelete
  14. 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

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

    regard :)

    ReplyDelete
  16. 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

    ReplyDelete
  17. bagus sekali bro... semoga menjadi ilmu yang bermanfaat..

    ReplyDelete
  18. 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

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

    ReplyDelete
  20. 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..

    ReplyDelete
  21. Juragansopwar:
    Sama-sama kang Juragan..

    ReplyDelete
  22. 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

    ReplyDelete
  23. waduh keren skali yo mas...... good dah pokok nya hehheh

    ReplyDelete
  24. Wong plumpang: Good juga dahhhh ^_^

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

    ReplyDelete
  26. thanks yah mas atas tutorialnya...

    ReplyDelete
  27. Maantab betul bro tutorialnya, thankyu3.....

    ReplyDelete
  28. ok mkcih om..... posting ono sangat membantu sy tuk tau lebih banyak tentang blogger.....

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

    ReplyDelete
  30. wah.... ternyata yang ku cari selama ini dapat juga.........
    makasih bro.....
    terus berjuang....

    ReplyDelete
  31. itu kodenya terus diapain?? ditaruh mana??

    ReplyDelete
  32. 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

    ReplyDelete
  33. 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".

    ReplyDelete
  34. 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

    ReplyDelete
  35. oh ya gimana caranya kalau gambarnya banyak.?

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

    ReplyDelete
  37. Q nga ngerti, setelah di kopy, terus di save d mana//??

    ReplyDelete
  38. wat ngrubah sizenya maz gmna caranya??

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

    ReplyDelete
  40. makasih buat tipsnya tapi kok tulisannya kecil yaa cara besarinnya gimana

    ReplyDelete
  41. mas harus di upload dulu yah baru jadi ...

    ReplyDelete
  42. Thanks bgt buat Tips cara buat Tulisan Berjalan sob. Bagus i like

    ReplyDelete
  43. thanks gan...punyaku aku ganti baner yang berjalan...

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


    Mohon Jawaban nya.. :D

    ReplyDelete
  45. akhirnya ketemu juga tutorialnya, apakah ini bisa dipasang di widget ?

    ReplyDelete
  46. penulisanya penulisan sintak html ya di letakan di mana???

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

    ReplyDelete
  48. 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

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

    ReplyDelete
  50. thnk gan website sy jdi kereeeeen

    ReplyDelete
  51. to http://universityofbloggers.blogspot.com .follow sukses.Follback ya http://sejarahpaser.blogspot.com thanks.

    ReplyDelete
  52. SY SANGAT BINGUN DI BLOGGER SY MAU PASANG TULISAN BERGERAK TAPI ? TRIMS

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

    ReplyDelete
  54. Makasih banget , ternyata foto bisa lebih dari satu

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

    ReplyDelete
  56. hmmm... trnyata gmpang bnget buat teks brjalan di blog, trims infonya.

    ReplyDelete
  57. klo yg jalan keatas tulisanya lngsung banyak gmn mas ? thx

    ReplyDelete
  58. Misalnya mau beberapa tulisan, berjalan ke atas, biar ada spasi antar tulisan bagaimana?

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

    ReplyDelete
  60. sudah dipraktekkan gan untuk widget testimonial, mantap .....

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

    ReplyDelete
  62. Ternyata mudah ya membuat teks berjalan.

    ReplyDelete
  63. bagaimana cara mengganti fontnya ?

    thx

    ReplyDelete
  64. kalau hurufnya biar gede gimana? thanks

    ReplyDelete
  65. trimakasih artikelnya, salam hormat dari LPPL radio publik mimika papua

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

    ReplyDelete
  67. 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.

    ReplyDelete
  68. gimna cra na biar beground'a berwarna?

    ReplyDelete
  69. muhamad andries 27 April 2013 08.26

    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.
    ________________________________
    aq juga cari yang kayak gini mas,, gmana caranya ?
    TQ sebelumnnya ^^

    ReplyDelete
  70. Saya juga tanya ni mas.. cara buat marquee tanpa ruang kosong gimana ya..? trims

    ReplyDelete

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.