16.12.13
94
Marquee Effect Pictures
Cara Membuat Tulisan Berjalan dan Bergerak Pada Blog, Cara Membuat Kalimat Bergerak dan Berkedip Pada Artikel, Cara Membuat Alamat Link Berjalan dan Bergerak Di Blog
Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan menggunakan efek marquee- Mungkin banyak diantara sahabat blogger yang telah dulu mengenal dan memahami apa itu marquee ?, berhubung saya masih pemula di dunia blogging dan juga baru mengenal kata MARQUEE gak ada salahnya saya share beberapa model efek marquee di artikel kali ini, ya... hitung-hitung memperbanyak koleksi perkenalan kode marquee ke sahabat lain gitu..!! hehe..

Ok..! dech tanpa basa-basi lagi langsung aja kita meluncur ke topik Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan - yang kita kenal sebagai marquee itu menggunakan perkodean CSS HTML, cara membuatnya pun terbilang mudah, cukup menuliskan kode <marquee> di awal teks, dan akhiri dengan kode penutup </marquee> di akhir teks seperti ini:



<< MACAM >><< MACAM >>
EFEK TEKS DENGAN MARQUEE


Berikut beberapa model MARQUEE yang dapat Anda gunakan untuk Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan:

1. Marquee Tanpa Atribut
Silahkan tinggal di copy aja kode html dibawah ini

<marquee>TEKS INI AKAN BERJALAN</marquee>

Hasilnya :
TEKS INI AKAN BERJALAN


2. Marquee Dengan Atribut
Scrollamount = Kecepatan kalimat, semakin besar angka maka kalimat berjalan cepat
Direction = Pengaturan gaya arah kalimat berjalan
Bgcolor = Pengaturan warna kalimat atau Teks berjalan
Behavior = Pengaturan gaya kalimat bejalan
Scrolldelay = Pengaturan gaya kalimat yang ditentukan dengan detik/mil

Silahkan tinggal di copy aja kode html dibawah ini

<marquee scrollamount="100">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="left" scrollamount="10">TEKS INI AKAN BERJALAN</marquee>
<marquee behavior="alternate" scrollamount="15">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="right" scrollamount="10">TEKS INI AKAN BERJALAN</marquee>
<marquee direction="right" scrollamount="100">TEKS INI AKAN BERJALAN</marquee>
<marquee bgcolor="red">TEKS INI AKAN BERJALAN</marquee>

Hasilnya :
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN
TEKS INI AKAN BERJALAN


3. Marquee Dengan Penggabungan Beberapa Atribut
Silahkan tinggal di copy aja kode html dibawah ini

<marquee loop="5">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="right" style="background-color: green;" width="125">KALIMAT INI AKAN BERJALAN</marquee><marquee direction="left" style="background-color: blue;" width="125">KALIMAT INI AKAN BERJALAN</marquee>
<marquee style="font-style: italic;">KALIMAT MIRING AKAN BERJALAN</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN 5X SETELAHNYA AKAN HILANG
KALIMAT INI AKAN BERJALANKALIMAT INI AKAN BERJALAN
KALIMAT MIRING AKAN BERJALAN


4. Marquee Dengan Penggabungan Atribut Sesuai Perintah Mouse
Atribut berikut dapat Anda tambahkan untuk memanggil perintah pointer mouse. Singkatnya, efek teks akan berhenti saat panah mouse Anda melintasi/berada pada teks, dan sebaliknya teks akan kembali berjalan saat pointer mouse di lepas.

Silahkan tinggal di copy aja kode html dibawah ini

<marquee onmouseout="this.start()" onmouseover="this.stop()">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="up" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">KALIMAT INI AKAN BERJALAN</marquee>
<marquee direction="down" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">KALIMAT INI AKAN BERJALAN</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN
KALIMAT INI AKAN BERJALAN
KALIMAT INI AKAN BERJALAN


5. Marquee Dengan Perpaduan Atribut Style
Silahkan tinggal di copy aja kode html dibawah ini

<marquee direction="right" scrollamount="225" width="200">KALIMAT INI AKAN BERKEDIP</marquee>
<marquee scrollamount="200" width="180">KALIMAT INI AKAN BERKEDIP</marquee>
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">Kembali ke Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan</marquee>

Hasilnya :
KALIMAT INI AKAN BERJALAN
KALIMAT INI AKAN BERJALAN
Kembali ke Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan


Beberapa kode pada artikel ini, sudah saya benarkan atau saya perbaharui agar memudahkan Anda dalam menerapkan efek ini pada tulisan blog Anda, sebagai referensi panduan buat sahabat semua pecinta SAHABAT BLOGGER 77, berikut beberapa desain terbaru untuk membuat tampilan efek pada teks atau tulisan. Semoga tutorial ini dapat memberikan Anda inspirasi, untuk berbagi hal-hal menarik lainnya di sini. Terimakasih


DESAIN EFEK TERBARU PADA TEKS/TULISAN (Modifikasi)
Membuat Efek CSS Animasi Pada Tulisan
Menciptakan Efek Pelangi Pada Text
Membuat Efek Tulisan Dengan CSS Text Shadow



Di benarkan dan telah di perbaharui pada:
July 26, 2014 Oleh - Devy Indriyani

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

94 komentar

  1. Makasih sharingnya ya Mbak tentang Teks berjalan ini

    BalasHapus
  2. wah jadi nambah ilmu nih..makasih atas infonya mba..

    BalasHapus
  3. keren hasilnya juga, hal ini udah saya terapkan dalam blog, ^.^

    BalasHapus
  4. ikut ninggalin jejak gan, mau tanya dong, bikin menubar kaya punya ente gimana ya??
    maklum masih newbie, baru belajar bikin blog, terimakasih banyakk

    BalasHapus
    Balasan
    1. sebelumnya saya mohon maaf gan, kalau bisa pertanyaan agan pada artikel saya pada label menu navigasi bukan disini, bukannya kenapa-kenapa gan, agar kita lebih mudah dalam saling tanya jawab,

      tentang menu pada blog ini, agan cari saja pada artikel saya pada label menu navigasi, mohon pengertiannya ya gan, terimakasih

      Hapus
    2. okey, maaf sebelumnya, dan terimakasih..

      Hapus
  5. Ngomong-ngomong Scricpt di atas tidak berlaku pada Internet Explorer coba aja buka blog ini via IE.. gak ada tampilan berjalan..

    dan sampai skrg saya masih cari solusi biar bisa berfungsi di IE.. jika ada yang bisa membantu sebelumnya terimaksih..

    BalasHapus
  6. Mantap infonya,... makasih.....

    BalasHapus
  7. tips yang menarik sekali..

    BalasHapus
  8. visit my blog gan,, mmmtabanan.blogspot.com
    trimakasih

    BalasHapus
  9. Gan Naro Kode Nya Tersebut Dmna Ya ?? Apa Di Tambahkan Gadget Kah ?

    BalasHapus
    Balasan
    1. sesuka hati mas, jika ingin pada postingan maka letakkan kodenta pada mode tulis HTML, atau pada sidebar,letakkan pada widget-gadget

      Hapus
  10. thanks gan, sudah saya coba..kereeennnn

    BalasHapus
  11. cuman masalahnya efek marque seperti ini akan membuat blog loadingnya kan berat,kalau dari sisi seo bakal berkurang seo blog nya gan,... salam

    BalasHapus
    Balasan
    1. jika kita berbicara tentang loading blog, mka apupun yang kita tambahkan kedalam widget semua akan dipertimbangkan tentang speed load, jika tidak ingin speed berkurang, maka jangan pakai widget sama sekali

      [blockquote]heading dan meta tag adalah faktor utama dalam SEO berdasarkan W3C, yang mana heading terbagi lagi menjadi beberapa selektor,dan salah satunya adalah title tag, jadi masalah marquee hanyalah sebuah widget tampilan, jadi tidak ada pengaruhnya terhadap SEO. namun jika "blink" tidak diperbolehkan digunakan pada standar W3C. saya rasa begitu[/blockquote]

      Hapus
  12. seperitnya ini mudah saya tangkap ilmunya *hap* hehe thanks mbak devi ilmunya :)

    BalasHapus
  13. maaf saya masi bingung, jelasin donk

    BalasHapus
  14. Udah tak coba work gan Berhasil , trimakasih inponya... :d

    BalasHapus
  15. perlu dicoba nih gan www.cara-alami.net

    BalasHapus
  16. Terimakasih gan Infonya ditunggu info selanjutnya yah Salam kenal buat semuanya =)

    BalasHapus
  17. mksih ya! membantu banget! mklum qjuga blogger baru nich..

    BalasHapus
  18. cocok banget nih untuk buat ucapan selamat datang atau untuk informasi penting untuk para pengunjung blog dengan memasang teks berjalan ini ;)

    BalasHapus
  19. maap ya mbak devy saya sering ngrepoting hehe.. maklum saya orang baru :))

    BalasHapus
  20. Thanks... Browwwwwwwwwwwwwww

    BalasHapus
  21. Keren caranya..
    Tapi kebanyakan kode gitu, aku jadi bingung sendiri

    BalasHapus
    Balasan
    1. lain kode lain efek, kali semua mau digunakan ya banyak donk kodenya, jadi yang ada pasti bingung, hehe

      Hapus
  22. Thx mastah..... ane bookmark dolo kodenya :)

    BalasHapus
  23. gan iti yg macam macam di atas gimana kode nya ?

    BalasHapus
    Balasan
    1. kita ambil titk fokus pada center (tengah) dengan mengukur nilai pada width(lebat teks) pada kiri dan kanan. sehingga akan tercipta efek seperti itu. kodenya seperti ini mas :

      [pre]<marquee direction="left" width="130" style="color: red;"><< MACAM >></marquee>

      <marquee direction="right" style="color: blue;" width="130"><< MACAM >></marquee>[/pre]

      Hapus
  24. Nice article brother, i will wait your next article, thanks so much Download Lagu Terbaru Gratis

    BalasHapus
  25. keren gan thank's infonya
    ane udh cobain berhasil

    BalasHapus
  26. Asalam..apa khbara orang seberang harap sihat saja ya..kunjungan balas disore petang ini..

    BalasHapus
  27. Canti sekali sentuhan blog anda ya..terpegun melihatnya

    BalasHapus
  28. mantap gan.. dicoba nih

    BalasHapus
  29. Kalo di aadd ke google site bisa ya gan?

    BalasHapus
  30. thanks infonya,,smga bermanfaat,,,

    BalasHapus
  31. jadi tampil efek teks yang bergerak, lumayan bagus (y)

    BalasHapus
  32. tampilan blog memang semakin indah.. saya sudah pernah mencobanya mbak.. :)

    BalasHapus
  33. Terimakasih buat tips bloggingnya Mbak. :)

    BalasHapus
  34. gimana ya cara kasih jalan tulisan teks di bagian bawah blog mhoninfonya

    BalasHapus
    Balasan
    1. Temukan kode tag penutup </body> pada Tempalte Anda,
      lalu letakkan kode efek marquee tepat diatasnya. misal Anda ingin efek marquee dengan atribut background-color seperti ini:

      <marquee bgcolor="red">TEKS INI AKAN BERJALAN</marquee>

      maka susunannya akan menjadi seperti ini:

      <br/>
      <marquee bgcolor="red">TEKS INI AKAN BERJALAN</marquee>
      </body>

      Hapus
  35. Tempelete blognya keren :)

    BalasHapus
  36. Tanks brayy tuk infonya...

    BalasHapus
  37. Mantap informasinya thanks ya..

    BalasHapus
  38. Top markotop mbk, keren ☺

    BalasHapus
  39. Ada banya rupanya variasi Marquee (teks berjalan), bisa di modifikasi lagi animasinya.....dulu blog saya pernah menggunakannya, tampilannya sederhana memang tetapi semakin mempercantik tampilan blog dengan tampilan teks berjalan. Berkunjung ke blog Mbak Devi mendapatkan banyak manfaat terutama seputar blogging....

    Saya kita lambat saling mengenal ya Mbak Devi, kalau sejak dulu mungkin blog saya udah semakin rame...

    BalasHapus
  40. ternyata marquee bisa juga digunakan di blog.. baru tau .. makasih infonya :D
    ditunggu kunjungan baliknya

    BalasHapus
  41. Thanks banget. Blog ini sangat membantu

    BalasHapus
  42. Thanks banget buat tips mempercantiknya, akhirnya blog saya cantik juga kayak mbak yang begitu cantik + baik hati :)

    BalasHapus
  43. blog nya Bagus banget mba, boleh bagi tipnya gak,soalnya saya newbie mba ;((

    BalasHapus
  44. mantap informasinya...
    terima kasih dan ijin copy ya

    BalasHapus
  45. mantap informasinya...
    terima kasih dan ijin copy ya

    BalasHapus
  46. Naaaaaaah, inniii dia......barrruuuu shiiiip, sdh ornya cantiiiik, eh sorry, gak keliatan potonya ya......gak apalah...+ jujuuuRR.
    [gak kayak di sebelah, mo ngasih impo aja, msh di suruh mouuter-mouuter, dan virus lagi].

    buat host saya kasih terima kasih.......LANJUTKAN cah ayuuuuu............

    BalasHapus
    Balasan
    1. fotonya ada dibawah permalink mas Ridho, kalau cantik sih sudah pasti karena saya CEWEK, kan gak mungkin ganteng kan, hehe..!!

      dan kalau boleh jangan membandingkan begitu mas, cara seseorang dalam menyampaikan informas kan berbeda-beda, Devy hanya memberikan bagaimana agar pengguna mudah mengerti apa yang saya sampaikan

      Hapus
  47. siip ,,tutorialnya
    mampir juga di blog sya ya,,mhon saran karena sya masih mula
    http://goratgaret.blogspot.com/

    BalasHapus
  48. TERIMAKASIH, bagus bangt

    BalasHapus
  49. kalau animasi tulisan berjalannya ane pasang di blog saya ini http://www.birotravelpulauharapan.com/ kira-kira bakalan lemot gak ya gan blog saya?

    BalasHapus
  50. Top deh ilmunya, makasih sudah berbagi, akan saya coba di blog saya. salam kenal, dari blogger newbie.

    BalasHapus
  51. Bagaemna caranya ya adadmin?....... saya bru biikin blog,,,dan saya pingin naruh kata berjalan?

    BalasHapus
  52. text yang ditengah marquee bisa dirubah ukuranya gak mbak?, pengen text gede :)

    BalasHapus
    Balasan
    1. tambahkan atribut style setelah kode marquee pembuka, contoh seperti ini:

      <marquee style="font:bold 35px/normal Verdana,sans-serif">TEKS Anda</marquee>

      Hapus
  53. . bingung cara ngedit HTML nya ??
    ternyata buat blog tak segampang yang saya kira ...

    BalasHapus
    Balasan
    1. apa yang membuat mas Ishak jadi bingung ya, tidak perlu edit HTML kok dalam tutorial ini. semuanya sudah saya permudah,cukup pilih gaya teks yang akan dpasang pada blog, setelah itu Copy Paste kodenya..
      mudah...

      Hapus
  54. sangat membantu . . :) tq mbak x-)

    BalasHapus
  55. wah keren banget ya... baru tahu saya kalau teks memiiki kode-kode tersendiri untuk dapat bergerak

    BalasHapus
  56. Saya malah baru tahu kalau efek tulisan berjalan seperti itu namanya marquee, soalnya belum pernah menerapkannya pada blog sendiri.
    Salam

    BalasHapus
  57. .Baru tau saya mbak kalau marquee memiliki tribut juga. Saya save ya mbak. :)

    BalasHapus
  58. keren kak . mksh ilmunya :)

    BalasHapus
  59. mksih ilmu nyakx.. :-)

    BalasHapus
  60. Terimakasih ya gan atas pengetahuanya, Salam kenal gan..,.,., (h)

    BalasHapus
  61. saya masih bingung mas cara memasukkan atau mengedit lewat mana...

    BalasHapus
  62. sy msh bingung mas utk memasukkan dan mengedit di bagian mana..........

    BalasHapus
  63. Masukin kodenya ke HTML ke bagian mana? Masih bingung. Please jawab ya

    BalasHapus
  64. Gmn buat text berjalan tapi isinya potingan terbaru ?

    BalasHapus
  65. Maaf mas itu kalo untuk wp bisa ga ya he he belum paham nih pertama kali buat blog

    BalasHapus
  66. itu Yg tampilan no 4 . Udah saya tes Tapi Gak ada warna nya .

    BalasHapus
  67. KERENNNN ... TERIMAKASIH GAN ...

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK