Cara Membuat Tulisan Berjalan dan Gambar Berjalan (Marquee) di Website/Blog

Cara Membuat Tulisan  Berjalan (Marquee) di Website/Blog

 

Karena untuk mendapakan karya yang baik kita sebagai penulis perlu berkreasi pada tulisan di blog kita untuk memberikan kesan yang indah dan menarik bagi para pembaca/pengujug blog kita nantinya.

Salah satunya, kita dapat memberi sedikit sentuhan seni animasi yaitu membuat tulisan/teks yang terlihat berjalan.

Terkadang saat kita meonton Tv Sering kan lihat tulisan/teks berjalan di layar televisi, di pinggir jalan  terpasang papan tempat periklanan (Billboard),di counter-conter biasanya banyak terpasang dengan berbagai macam gerakan.

Sedangkan dalam dunia Web-pro, tulisan/teks berjalan atau running text lebih dikenal dengan nama “Marquee”

Marquee adalah salah satu kode bahasa program HTML (HyperText Markup Language), untuk membuat efek tulisan/gambar menjadi berjalan atau bergerak.

Cara membuat tulisan berjalan (marquee) di website/blog, bukanlah hal yang sulit, sebenarnya sangat muah kalau sudah tahu caranya. 

Kaliini kita akan mencoba membuat beberapa jenis marquee yang bisa sobat pilih untuk di erapkan dalam blog. Namun terlebih dulu kita belajar membuat Script -nya dan lihat contohnya 

Mari kita bahas mulai dari yang dasar dahulu. 

Kode dasar Tag Marquee :

<marquee> TULISAN BERJALAN </marquee>

Secara default, teks akan berjalan dari kanan ke kiri dan berulang terus-menerus.

Contoh: 

TULISAN BERJALAN

Tapi mungkin  Teks contoh diatas kurang seru, kalau hanya gerakannya monoton itu-itu saja. Tenang saja disni akan dibahas tag marquee yang memiliki beberapa attribute yang bisa kita kombinasikan untuk membuat beberapa variasi gerakan tulisan sesuka hati.

Berikut beberapa Atribut Marquee :

Attribute & Value	Description
direction = "left/right/up/down"	Mengatur arah gerakan teks
behavior="scroll/slide/alternate" Note : *scroll (bergerak berputar) *slide (sekali lalu berhenti) *alternate (bolak-balik men)	Mengatur perilaku gerakan teks Seperti : bergerak sekali lalu berhenti, berputar, atau bolak-balik
align = “left/right/center/justify”	Mengatur posisi teks
bgcolor ="warna/kode warna"	Memberi warna tulisan
scrollamount="angka"	Mengatur kecepatan gerakan, semakin besar angka semakin cepat gerakannya
scrolldelay="angka"	Mengatur waktu tunda gerakan dalam mili detik
loop = "angka |-1| infinite"	Mengatur jumlah perulangan (loop)
width="px atau %"	Mengatur lebar blok teks dalam pixel atau persen
height ="px atau %"	Mengatur tinggi blok teks dalam pixel atau persen
title="pesan"	Pesan akan muncul saat mouse berada di atas teks
onmouseover = “this.stop()”	Menghentikan teks saat disorot mouse
onmouseout = “this.start()”	Menjalankan teks ketika mouse menjauh
hspace = "px"	Mengatur jarak kiri-kananya teks
vspace = "px"	Mengatur jarak atas-bawahnya teks

Catatan : 

Silahkan sobat berkreasi dengan cara mengkombinasikan atribut marquee ini. 

Bahkan sobat juga bisa untuk dekorasi tampilannya sesuai keinginan, dengan menggabungkannya kode program CSS.

Sekarang mari kita sama-sama belajar membuat tulisan bejalan di website/blog, dengan Script HTML marquee. 

Silahkan ganti "TULISAN BERJALAN" dengan pesan singkat yang ingin sobat sampaikan di blog sobat.

1. Tulisan Berjalan dari kanan ke kiri, atau dari kiri ke kanan

Script :

<marquee direction="left" scrollamount="10"> Tulisan berjalan ke kiri </marquee><br />
<marquee direction="right" scrollamount="10"> Tulisan bejalan ke kanan </marquee>

Contoh:

Tulisan berjalan ke kiri
Tulisan bejalan ke kanan

2. Tulisan berjalan dari atas ke bawah, atau dari bawah ke atas 

 Script :

<marquee align="center" direction="down" scrollamount="3"> Tulisan berjalan ke bawah </marquee><marquee align="center" direction="up" scrollamount="3"> Tulisan berjalan ke atas </marquee>

Contoh :

Tulisan berjalan ke bawah Tulisan berjalan ke atas

3. Tulisan berjalan memusat atau berlawanan arah (kiri - kanan) 

 Script :

<marquee direction="right" width="50%"> Tulisan berjalan arah memusat</marquee><marquee direction="left" width="50%"> Tulisan berjalan arah memusat </marquee><marquee width = "50%"> Tulisan berjalan berlawanan arah </marquee><marquee direction="right" width="50%"> Tulisan berjalan berlawanan arah </marquee>

Contoh : 

Tulisan berjalan arah memusat Tulisan berjalan arah memusat Tulisan berjalan berlawanan arah Tulisan berjalan berlawanan arah

4. Tulisan berjalan memantul (bolak balik ) 

 

Script :

<marquee behavior="alternate" scrollamount="10"> Tulisan berjalan memantul </marquee>

Contoh :

Tulisan berjalan memantul

5. Tulisan berjalan Zig-zag 

 Script :

<marquee behavior ="alternate" direction = "up" height="60px" scrollamount="6"> <br />
<marquee direction="right" scrollamount="6"> Tulisan berjalan zig-zag </marquee> </marquee>

Contoh :

Tulisan berjalan zig-zag

6. Tulisan berjalan melayang 

 Script :

<marquee behavior="alternate" direction="up" height="100" scrollamount="6" weight="460"><marquee behavior="alternate" direction="right"> Tulisan berjalan melayang </marquee> </marquee>

Contoh :

Tulisan berjalan melayang

7. Tulisan berjalan dengan atribut "behavior" 

 Script :

<marquee behavior="scroll" scrollamount="10" width="400">Tulisan berjalan (scroll) </marquee><br /><marquee behavior="slide" scrollamount="10" width="400"> Tulisan berjalan (slide) </marquee><br /> <marquee behavior="alternate" scrollamount="10" width="400"> Tulisan berjalan (alternate) </marquee>

Contoh : 

Tulisan berjalan (scroll)
Tulisan berjalan (slide)
Tulisan berjalan (alternate)

8. Tulisan berjalan dengan kecepatan 

 Script :

<marquee width="350"> Tulisan berjalan dengan kecepatan </marquee><br /<marquee scrollamount="5" width="350"> Tulisan berjalan dengan kecepatan </marquee><br /><<marquee scrollamount="25" width="350"> Tulisan berjalan dengan kecepatan </marquee>

Contoh :

Tulisan berjalan dengan kecepatan
Tulisan berjalan dengan kecepatan
Tulisan berjalan dengan kecepatan

9. Tulisan berjalan dengan atribut "vspace"

 Script :

<marquee bgcolor="red" scrollamount="10" vspace="15" width="400" > Tulisan berjalan (vspace) </marquee><br /><marquee bgcolor="yellow" scrollamount="10" vspace="15" width="400"> Tulisan berjalan (vspace) </marquee><br /><marquee bgcolor="green" scrollamount="10" vspace="15" width="400"> Tulisan berjalan (vspace) </marquee>

Contoh :

Tulisan berjalan (vspace)
Tulisan berjalan (vspace)
Tulisan berjalan (vspace)

10. Tulisan berjalan dengan "hspace" 

 Script :

<marquee bgcolor="red" hight="100" width="400"> Tulisan berjalan (hspace) </marquee> <br /> <marquee bgcolor="yellow" hight="100" hspace="8" width="400"> Tulisan berjalan (hspace) </marquee><br /> <marquee bgcolor="green" hight="100" hspace="20" width="400"> Tulisan berjalan (hspace) </marquee>

Contoh :

Tulisan berjalan (hspace)
Tulisan berjalan (hspace)
Tulisan berjalan (hspace)

11. Tulisan berjalan dengan Background 

 Script :

<marquee bgcolor="FFF300" align ="center" direction ="left" scrollamount="10"> Tulisan berjalan dengan background </marquee>

Contoh :

Tulisan berjalan dengan background

12. Tulisan berjalan dengan link, dan akan berhenti ketika pointer diletakkan di atasnya. 

 Script :

<marquee align="center" direction="up" height="200" onmouseout ="this.start()" onmouseover = "this.stop()" scrollamount="2" width="100%"> <a href="https://nilibass.blogspot.com/2020/10/cara-membuat-tulisan-berjalan-dan.html"> Cara membuat tulisan Berjalan</a><br /> <a href="https://nilibass.blogspot.com/2020/10/cara-membuat-tulisan-berjalan-dan.html"> Cara membuat tulisan Berjalan </a><br /> <a href="https://nilibass.blogspot.com/2020/10/cara-membuat-tulisan-berjalan-dan.html"> Cara membuat tulisan Berjalan  </a><br /> </marquee>

Contoh :

Cara membuat tulisan Berjalan
Cara membuat tulisan Berjalan
Cara membuat tulisan Berjalan

13. Tulisan berjalan dengan atribut "Loop" 

Catatan: 

Tulisan ini berjalan hanya 5x puteran. Habis itu, tulisan berhenti. Untuk melihat gerakan, silahkan di-refresh kembali. 

 Script :

<marquee loop="5" width="450"> Tulisan berjalan dengan loop </marquee> <br /> <marquee behavior ="slide" loop="5" width="450"> Tulisan berjalan dengan loop </marquee>

Contoh :

Tulisan berjalan dengan loop
Tulisan berjalan dengan loop

14. Gambar berjalan dengan tag Marquee 

 Script :

<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgalmZRVVp5v2-zg-suMw5Pb1sd6PkeYC84Zsz7z8M2El4lTPT85jCYiCdWgO3Amomch2sqchXwi_To4SHiSDS_dwamJ325ARujEdRJFtk_QyTHCQNdO1m0F3vZk5O61WPtI4g6x6DD3Q/s150/animasi-bergerak-berlari-0071.gif" /></marquee>

Contoh :

15. Kombinasi Atribut Marquee 

Kombinasi marquee dapat dilakukan dengan menggabungkan beberapa atribut sekaligus. Sobat sudah mengetahui dasar-dasar membuat marquee, silahkan mengkreasikan marquee sobat sendiri. 

Contoh :

Ingat Selalu yah Sobat Semua Pasti Bisa  Terima Kasih Semoga Berjalan Lancar Semoga Bermanfaat Tidak ada yang sia-sia  Kejarlah cita-citamu

<< SELAMAT >> << MENCOBA >>

Bagaimana cara memasang tulisan dan gambar berjalan di website/blog? 

Ada dua cara yang bisa kita gunakan untuk memasangnya, yaitu melalui editor artikel dan melalui widget. 

1. Melalui Editor Artikel 

Caranya : 

1. Masuk ke Dashboard 
2. Buat Posting/New Entry
3. Tuliss konten seperti biasa sampai selesai 
4. Ganti mode penulisan dari “Compose” menjadi “HTML” 
5. Copy script tulisan berjalan yang sobat suka, dan Paste -kan Script tersebut pada posisi yang sobat mau. 
6. Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulisan berjalan..!” ganti dengan tulisan sobat yang mau dijalankan. 
7. Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan. 
8. Terakhir, kalau sudah berjalan dan posisinya sudah pas. 
9. Silahkan dipublish. 

2. Melalui Widget 

Caranya : 

1. Masuk ke Dashboard 
2. Pada Menu sisi kiri, Pilih Tata Letak/Layout 
3. Klik Tambahkan Gadget Baru 
4. Pilih gadget HTML/JavaScript Copy & Paste -kan tulisan berjalan pada bagian konten. 
5. Pastikan sobat melihat tulisan Rich Text 
6. Save 

Demikian cara membuat tulisan dan gambar berjalan (marquee) di website/blog, semoga sobat bisa mempraktekanya.

Semoga sobat menyukainya, silahkan berkreasi sendiri untuk menghias website/blog menjadi lebih menarik, atau mungkin ingin mencoba bereksperimen dengan membuat model baru. 

Silahkan untuk mencobanya ya! Semoga bermanfaat dan bisa menambah ilmu sobat. Terima kasih sudah berkunjung.