google-site-verification: google7105ea3515502ea1.html gumregut: Cara Membuat Tulisan Berjalan Marquee Text Di Blog

Friday, 24 October 2014

Cara Membuat Tulisan Berjalan Marquee Text Di Blog

Berikut ini cara membuat tulisan berjalan (Marquee Text) Di Blog yang mungkin sering anda lihat saat membuka sebuah blogspot/situs. Dengan menggunakan atau menambahkan kode Marquee yang dipasang pada blog ini, anda bisa menampilkan tulisan berjalan di blog sesuai keinginan anda, bisa mempercantik dan menyampaikan info ke pembaca.


Kita pahami dulu kode dasar untuk membuat Marquee text, yaitu seperti berikut:

<marquee>ISI TULISAN YANG BERJALAN</marquee>

contoh menjadi seperti ini

ISI TULISAN YANG BERJALAN

Nah, setelah anda tahu kode dasarnya, sekarang bagaimana cara memasang kode ini di blogger. Bisa kita pasang di artikel/postingan atau tambah gadget melalui Tata letak.


Cara memasang kode Marquee pada artikel/postingan:

1. Silakan ubah dari Mode Compose ke mode HTML

2. Masukkan kode Marquee di mode HTML

3. Sekarang klik/pindah di mode compose dan untuk melihat hasilnya, klik pratinjau.


Cara memasang kode Marquee pada widget

1. Masuk ke menu Tata Letak, lalu klik tambah gadget/add gadget

2. Pilih HTML/Java Script dan masukkan kodenya, lalu Simpan.

Untuk mempercantik, kita bisa mengubah warna, jenis huruf, dan ukuran teks:

Berikut bermacam kode Marquee yang bisa anda pakai:

style="font-family: Arial; font-size:20px; color:#00FF66;"

Arial adalah jenis huruf
20px adalah ukuran huruf
#00FF66 adalah warna huruf

Silakan lihat contoh berikut untuk membuat kodenya.

<marquee bgcolor="red" style="font-family: Arial; font-size:20px; color:#00FF66;">WARNA BACKGROUND UNTUK TEKS MARQUEE</marquee>

Lihat hasilnya:

WARNA BACKGROUND UNTUK TEKS MARQUEE

Silakan gunakan kode berikut untuk pilihan yang ingin anda gunakan:


1. Kode untuk pengulangan Rotasi

<marquee loop="5">TEKS AKAN BEROTASI 5 KALI</marquee>

Contoh

TEKS AKAN BEROTASI 5 KALI

Silakan ganti pada angka 5, teks akan hilang setelah berjalan 5 kali.


2. Kode untuk mengatur lebar teks

<marquee width="50%">LEBAR TEKS YANG BERJALAN UNTUK SETENGAH BIDANG</marquee>

Contoh

LEBAR TEKS YANG BERJALAN UNTUK SETENGAH BIDANG

Silakan ganti pada angka 50%


3. Kode membuat link pada Marquee teks

Jika anda klik pada teks berjalan, maka akan diarahkan ke link yang anda masukkan.

Kode dasar adalah sbb:

onmouseover="this.stop()" onmouseout="this.start()"

Untuk penerapan, contohnya sbb:

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://musttrie-art.blogspot.com/p/daftar-isi.html">CARA MEMBUAT TULISAN BERJALAN</a></marquee

CARA MEMBUAT TULISAN BERJALAN

Ganti kode http://musttrie-art.blogspot.com/p/daftar-isi.html


4. Kode untuk memberikan warna background pada jalur teks.

Contoh kode, sbb:

<marquee bgcolor="blue">CONTOH BACKGROUND AREA TEKS</marquee>

CONTOH BACKGROUND AREA TEKS

Silakan ganti kode warnanya.


5. Kode scrolldelay, untuk mengatur kecepatan/waktu jeda (milidetik)

Contoh kodenya adalah:

<marquee scrolldelay="500">JEDA TEKS BERJALAN ADALAH 0,50 DETIK</marquee>

JEDA TEKS BERJALAN ADALAH 0,50 DETIK

Anda bisa ganti angka 500


6. Kode untuk memberi pesan saat kursor diarahkan pada area teks

Contoh kodenya:

<marquee title="TEKS PESAN MUNCUL SAAT KURSOR SOROT TEKS">TEKS BERJALAN BERISI PESAN</marquee>

TEKS YANG BERJALAN BERISI PESAN


7. Kode untuk mengatur kecepatan teks berjalan

Contoh kode:
<marquee scrollamount="10">INI PADA KECEPATAN TEKS BERJALAN 10</marquee>

INI PADA KECEPATAN TEKS BERJALAN 10

Silakan ganti angka 10. Semakin besar angka semakin cepat teks berjalan.


8. Kode untuk mengatur arah teks bergerak (kiri, kanan, atas, bawah)

Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.

Contoh kode adalah sbb:

<marquee direction="left">TEKS BERJALAN KE KIRI</marquee>

TEKS BERJALAN KE KIRI

Ganti left sesuai yang diinginkan.


9. Kode untuk mengatur teks berhenti saat dilintasi mouse.

onmouseover="this.stop()" onmouseout="this.start()"

Contoh kode:

<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">INI CONTOH TEKS BERGERAK KE KIRI DAN BERHENTI SAAT DILINTASI MOUSE</marquee>


INI CONTOH TEKS BERGERAK KE KIRI DAN BERHENTI SAAT DILINTASI MOUSE


Selamat bereksperimen dan terus melakukan yang terbaik bagi semua, kita jumpa dilain waktu, salam sukses!

58 comments:

  1. mantap dah artikelnya
    http://ow.ly/FsiaG

    ReplyDelete
  2. mantap dah ...
    http://ow.ly/FsiaG

    ReplyDelete
  3. Mantaaap sob artikelnya :)
    Ijin share http://grosiracemaxstasik.com/obat-alami-diare/

    ReplyDelete
  4. Mantap artikelnya, terimkasih gan
    http://grosirobatjellygmat.com/
    http://obatjellygamatgoldg.net/
    http://jellygamat-gold.net/
    http://jamutradisionalmujarab.com/
    http://jellygamatgoldgpro.com/

    ReplyDelete
  5. Manteep sob artikelnya, sangat membantu :)
    Ijin share http://apotekherbalkita.com/obat-herbal-radang-tenggorokan/

    ReplyDelete
  6. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, BANK, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

    ReplyDelete
  7. nice artikelnya sangat bermanfaat sekali :)
    http://jellygamatgoldg31.com/

    ReplyDelete
  8. mantap artikelnya :)
    http://kedaijellygamatgoldg.com/obat-herbal-lipoma/

    ReplyDelete
  9. Nice guys artikelnya, thanks :)
    http://goo.gl/zqUU8t

    ReplyDelete
  10. Thanks ka infonya. Izin share :)
    http://goo.gl/sJDiSn

    ReplyDelete
  11. Manteep dah sob untuk tutornya, sangat membantu :)
    http://goo.gl/m6kxdR

    ReplyDelete
  12. terimakasih kawan infonya, salam semangat !
    http://bit.ly/1GDl7wE

    ReplyDelete
  13. Kereeen sobat artikelnya, sangat membantu sekali buat saya
    Izin nyimak :)
    http://goo.gl/HSLmvT

    ReplyDelete
  14. keren banget sob artikelnya, di tunggu artikrl yang lainnya
    Izin nyimak saja
    s.id/5PG

    ReplyDelete
  15. Makasih sob informasi artikelnya :)
    http://goo.gl/NcIh6Z

    ReplyDelete
  16. Terimakasih informasinya :)
    http://goo.gl/8yKBo1

    ReplyDelete
  17. Saya sudah masang, hasilnya baguuus :)
    http://goo.gl/S4oK7y

    ReplyDelete
  18. Kunjungi Blog Tiffany ^_^

    http://www.saranapokerinfo.com/2015/05/pada-tgl-6-mei-jepang-memperingati-hari.html
    http://tiffanychai05.blogspot.com/2015/05/agen-poker-wanita-ini-mengalami.html

    ReplyDelete
  19. Kunjungi Blog Saya ^_^

    http://www.saranapokerinfo.com/2015/06/demi-club-favoritenya-jurnalis-ini-rela.html
    http://tiffanychai05.blogspot.com/2015/06/agen-poker-gelandang-ac-milan-ini.html

    ReplyDelete
  20. wah mantab blognya, salam kenal ya brow..
    http://zakypotensi.blogspot.com

    ReplyDelete
  21. Terimakasih ya gan atas pengetahuanya, Salam kenal dan jangan lupa followbacknya gan,.,.

    ReplyDelete
  22. kalo tulisan bolak balik gimana ya cara bikinnya?
    internet marketing.

    ReplyDelete
  23. SELAMAT DATANG DI DISTRIBUTOR PULSA

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Tipsnya sangatlah bermanfaat ! THANK'S

    ReplyDelete
  26. KEREN GAN.. zn
    http://www.iso9001.co.id

    ReplyDelete
  27. KEREN GAN.. zn
    http://www.iso9001.co.id

    ReplyDelete
  28. mantap infonya gan...
    http://malangtoyota.blogspot.co.id/

    ReplyDelete
  29. klo di mix gmn caranya gan??? misalnya penambahan background dan klo di klik mouse berhenti teksnya

    ReplyDelete
  30. klo di mix gmn caranya gan??? misalnya penambahan background dan klo di klik mouse berhenti teksnya

    ReplyDelete
  31. klo di mix gmn caranya gan??? misalnya penambahan background dan klo di klik mouse berhenti teksnya

    ReplyDelete
  32. THANKS, ARTIKELNYA SANGAT MEMBANTU

    ReplyDelete
  33. artikel sangat membantu, terima kasih banyak ya kak ...
    izin share ya

    http://bit.ly/1MxAv3x

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. mantap gan jngan lupa mampir ke blog ane www.fahnik.com

    ReplyDelete
  36. mantap gan jngan lupa mampir ke blog ane www.fahnik.com

    ReplyDelete
  37. Gan kalau mengganti tulisannya gimana gan? biar ada variasinya?
    http://hasanwafa96.blogspot.co.id/

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. mantep artikelnya banyak membantu terimakasih

    ReplyDelete
  40. Maaf baru Bisa Nyempetin Waktu TUK Berkunjung,makasih dapat Ilmunya Semogah Mendapat keberkahan.AQmiin

    ReplyDelete
  41. Mantap gan info nya

    http://dg-pokerterpercaya.blogspot.com/
    https://beritabola39.blogspot.com/
    http://dewabookie.blogspot.com/
    http://beritametroline.blogspot.com/
    http://sukamuncrat.blogspot.com/
    http://sukabening39.blogspot.com/
    http://pasaranprediksi.blogspot.com/

    ReplyDelete
  42. keren gan, kunjungi juga http://www.online133.xyz

    ReplyDelete
  43. Terimakasih caranya, sangat bermanfaat sekali

    Jangan lupa kunjungi -> http://raja-alatantrian.blogspot.co.id/ untuk anda yang mencari alat antrian dan alat survey pelanggan yang lengkap, atau juga bisa hub kami 082150065758 , pin 2a9be37c

    ReplyDelete
  44. wah jadi nambah ilmu nih makasih gan,,buat artikelnya,,

    ReplyDelete