Cara membuat teks berjalan html di notepad – Adanya tulisan berjalan di blog mempercantik tampilan. Dengan alasan inilah banyak blog atau website yang menaruh tulisan di blognya, baik itu di homepage ataupun di postingan.
Di sini Saya akan menjelaskan secara singkat bagaimana cara membuat tulisan berjalan di blog dengan berbagai variasi. Ada yang berjalan ke atas, ke bawah, ke kiri, ke kanan. Ada yang berjalan zig-zag, ada yang berjalan memantul, ada yang jalannya berhenti ketika disorot mouse dan lanin-lain.
Kalian bisa mengeditnya sendiri untuk disesuaikan dengan blog atau website Sendiri. Dengan sedikit kemampuan edit HTML akan mempercantik tampilan tulisan berjalan Kalian.
Kode dasar untuk membuat marquee atau teks berjalan
<marquee>TULISAN INI AKAN BERGERAK</marquee>
Kode di atas akan terlihat seperti ini:
TULISAN INI AKAN BERGERAKTapi selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan sekaligus mempraktikkan marquee tersebut….
kode direction=”left/right/up/down” digunakan untuk mengatur arah pergerakan running text
Contoh kode:
<marquee direction=”right”>TULISAN INI AKAN BERGERAK KE KANAN</marquee><marquee direction=”up”>TULISAN INI AKAN BERGERAK KE ATAS</marquee>
Hasilnya akan terlihat seperti ini:
TULISAN INI AKAN BERGERAK KE KANANTULISAN INI AKAN BERGERAK KE ATASkode behavior=”scroll/slide/alternate” digunakan untuk mengatur type pergerakan
- Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
- Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
- Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung. Contoh kode:
<marquee behavior=”scroll”>MARQUEE BERGERAK SCROLL</marquee><marquee behavior=”alternate”>MARQUEE BERGERAK BOLAK-BALIK</marquee>
Hasilnya akan terlihat seperti ini:
MARQUEE BERGERAK SCROLLMARQUEE BERGERAK BOLAK-BALIKkode scrollamount=”angka” digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang
Contoh kode:
<marquee scrollamount=”20″>MARQUEE SPEED 20!!!</marquee>
Hasilnya akan terlihat seperti ini:
MARQUEE SPEED 20!!!kode bgcolor=”warna” digunakan untuk memberikan warna latar pada marquee jika diperlukan
Contoh kode marquee:
<marquee bgcolor=”DarkCyan”>RUNNING TEXT LATAR DARK CYAN</marquee>
Hasilnya akan terlihat seperti ini:
RUNNING TEXT LATAR DARK CYANkode scrolldelay=”angka” digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
Contoh kode marquee:
<marquee scrolldelay=”2000″>RUNNING TEKS DELAY 2 DETIK</marquee>
Hasilnya akan terlihat seperti ini:
RUNNING TEKS DELAY 2 DETIKkode loop=”angka|-1|infinite” digunakan untuk mengatur pengulangan atau repetisi dari marquee
Contoh kode marquee:
<marquee loop=”25″>MARQUEE BEROTASI HANYA 25 KALI</marquee>
Keterangan: Setelah 25 kali teks akan hilang.
Hasilnya akan terlihat ini:
kode title=”pesan” digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan tersebut.
Contoh kode:
<marquee title=”INI PESANNYA”>MARQUEE DENGAN PESAN</marquee>
Hasilnya akan terlihat seperti ini:
MARQUEE DENGAN PESANkode MARQUEE DENGAN PESAN digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada
Contoh kode:
<marquee width=”250px”>MARQUEE LEBAR 250 PIXEL</marquee>
Hasilnya akan terlihat seperti ini:
MARQUEE LEBAR 250 PIXELkode onmouseover=”this.stop()” onmouseout=”this.start()” digunakan untuk membuat tulisan marquee berhenti jika dilintasi kursor mouse
Contoh kode:
<marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()”>MARQUEE BERGERAK BOLAK-BALIK</marquee>
Hasilnya akan terlihat seperti ini:
MARQUEE BERGERAK BOLAK-BALIKCara Membuat Marquee Bergerak Zig-zag
<marquee behavior=”alternate” direction=”up” height=”50px”><marquee direction=”right”>MARQUEE BERGERAK ZIG-ZAG</marquee></marquee>
Hasilnya akan terlihat seperti ini:
MARQUEE BERGERAK ZIG-ZAGCara Memberi Link Pada Marquee
Kode yang digunakan untuk memasukan link pada marquee
<marquee behavior=”alternate” onmouseover=”this.stop()” onmouseout=”this.start()” scrollamount=”10″><a href=”//ridpir.com”>CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a>
</marquee>
catatan :
ganti //ridpir.com dengan Url yang di inginkan.
Hasilnya akan terlihat seperti ini:
CARA MEMBUAT TULISAN BERJALAN (MARQUEE)Cara Mengubah Huruf, Warna dan Ukuran Font Marquee
Untuk mengubah jenis huruf dan ukuran bisa menambahkan kode css style=”font-family: verdana; font-size:25px; color: #FFFFFF;”
font-family: verdana; adalah kode untuk mengubah jenis huruf. Jika anda tidak suka dengan font impact, silahkan diganti dengan Arial, Times New Roman, atau yang lainnya
font-size:25px; adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuka hati anda. Semakin besar nilainya, maka semakin besar juga hurufnya.
color:#FFFFFF; adalah kode untuk mengatur warna huruf. Silahkan mengganti kode hex #FFFFFF dengan nilai hex yang anda suka.
Contoh kode:
<marquee bgcolor=”#10BE73″ style=”font-family: impact; font-size:24px; color: #FFFFFF;”>MARQUEE LATAR KEREN</marquee>
Dengan Hasil:
MARQUEE LATAR KERENItulah Cara membuat teks berjalan (marquee) baik di notepad, di blog (website) ataupun ditempat coding lainnya yang bisa Anda praktikkan dengan sangat mudah
Sumber Referensi:
carakumembuat dan caramadia
Jika MARQUEE Tidak Bergerak, Silakan Klik Tautan Berikut ini Untuk Melihat Tutorial Cara Membuat Marquee
Isi Artikel:
- Kode dasar untuk membuat marquee atau teks berjalan
- Cara Membuat Marquee Bergerak Zig-zag
- Cara Memberi Link Pada Marquee
- Cara Mengubah Huruf, Warna dan Ukuran Font Marquee
REKOMENDASI:
- Cara Mengubah Ukuran Foto Menjadi 4X6 di HP dan Komputer… Berikut Adalah Cara Mengubah Ukuran Foto Menjadi 4X6 di HP Android, iPhone dan Juga Komputer Laptop Secara Online dan Offline Tanpa Aplikasi Tambahan Cara untuk…
- Cara Screenshot Panjang di Komputer / Laptop Windows 10 dan… Berikut Tutorial Cara Screenshot Panjang di Komputer atau Laptop Windows 10 dan Windows 11 Dengan Sangat Mudah Dengan dan Tanpa Aplikasi Tambahan. Melakukan screenshot terkadang…
- 2 Cara Mengecilkan Icon Desktop di Windows (7, 8 & 10) Icon di desktop pada windows menjadi yang paling pertama kamu lihat setelah selesai melakukan booting pada komputer ataupun laptop. Hal ini menjadi alasan tersendiri bagi…
- 100+ Perintah Dasar Linux Ubuntu Server (CLI) Lengkap Berikut Adalah 100+ Perintah Dasar Linux / Kali Linux / Debian Lengkap dengan Pengertian Perintah dan Fungsinya + Link Download PDF Perintah Dasar Linux Ubuntu…
- Perbedaan, Kelebihan Serta Kekurangan PC Built UP Dengan PC… Perbedaan, Kelebihan Serta Kekurangan Antara Komputer PC Built UP dengan PC Rakitan - Sekilas Nampak sama antara pc rakitan dengan pc built up, terutama dalam…
- Persamaan, Perbedaan serta Cara Kerja Antara Hub dan Switch,… Persamaan, Perbedaan serta Cara Kerja Antara Hub dan Switch - Seringkali kita dibuat bingung dengan dua buah perangkat atau lebih yang memiliki bentuk serupa tapi…
- Cara Melihat Mac Address Laptop dan Komputer Windows 7… Ridpir.ID - Hari raya telah berlalu, dan saya akan kembali mengisi blog ini agar tidak dikira blog mati :D. Jika sebelumnya saya update artikel dalam…
- Cara Mengetahui Judul Lagu dari Video (TikTok, YouTube,… Tutorial Lengkap Cara Mengetahui dan Mendeteksi Judul Lagu (Sound MP3) dari Video Tiktok, Facebook, YouTube, Twitter dll Secara Online dengan dan Tanpa Aplikasi Tambahan (Support…
- Penyebab Laptop (Windows 7) Lag Meski sudah di Install Ulang… Penyebab Laptop Lag Meski sudah di Install Ulang, Mengupas Penyebab dan Bagaimana Cara Mengatasinya Beberapa hari yang lalu ada teman saya yang datang kerumah dengan…
- Paten! Cara Mengatasi Laptop tidak bisa Nyala tapi Lampu… Cara Mengatasi Laptop tidak bisa Nyala tapi Lampu Charger Hidup Lengkap dengan Penyebab Kenapa Laptop Hanya Menyala Lampu Indikator Warna Orange saat di Cas pada…
- 2 Cara Mudah Membuat Simbol di Komputer 2 Cara Miudah embuat Simbol di Keyboard Laptop dan Komputer, Membuat Anak Panah, Simbol Akar, Love Bintang Menggunakan ALT Komputer bisa dibilang sebagai alat elektronik…
- Perbedaan Netbook, Notebook dan Laptop. Mana yang Terbaik? Teknologi memang sudah tidak bisa kita perkirakan lagi kemajuannya, salahsatunya adalah kemajuan dibidang komputer. Apabila dulu hanya terdapat personal komputer atau PC itupun dengan spesifikasi…
- Cara Mengatasi WiFi Terhubung Tapi Tidak Bisa Akses Internet… Cara Mengatasi WiFi Terhubung Tapi Tidak Bisa Akses Internet di Laptop, Komputer PC (Windows 7, 8, 8.1, 10 dan 11) serta HP Android (Xiaomi, Vivo,…
- Cara Menghidupkan Power Supply Tanpa Motherboard dan CPU Cara Mudah Menyalakan Power Supply Tanpa Motherboard dan CPU - Menghidupkan power supply tanpa menggunakan motherboard ataupun CPU memang bukanlah hal yang mustahil. Terlebih buat…
- Banyak Yang Terjebak, Ini Perbedaan RAM DDR3 dan DDR3L Pada… Perbedaan RAM DDR3, DDR3L dan DDR3U - RAM (Random Acces Memory) merupakan salahsatu hardware komputer/laptop yang memiliki peranan penting agar komputer/laptop itu bisa berjalan dengan…
- Cara Tepat Mengetahui RAM yang Cocok Untuk Motherboard Berikut Panduan Cara Mengetahui RAM yang Cocok untuk Motherboard Beserta Beberapa Tips yang Bisa Sobat Pegang Sebelum Mengganti RAM Mungkin pada saat ini sebagian sobat…
- Cara Mengetik di Word Dengan Suara Dilengkapi Video Cara Mengetik Dengan Suara di MS Word dan Google Docs Menggunakan HP, Laptop, dan PC Windows 10 Dengan Sangat Mudah. Di era yang serba digital…
- Cara Install Driver Printer Epson L3110 Dengan Sangat Mudah Berikut Panduan Cara Install Driver Printer Epson L3110 Dengan Pakai CD dan Tanpa CD Secara Online Lengkap Dengan Cara Menyambungkan Printer Epson L3110 ke Macbook…
- Kapasitas Maksimal RAM pada Komputer Kapasitas Maksimal RAM pada Komputer - Random Access Memory atau yang lebih kita kenal dengan istilah RAM merupakan memori yang digunakan komputer / laptop untuk…
- Cetek! Berikut 2 Cara Mengetahui Sisa Memory (RAM) Pada PC… Cara Melihat Sisa Memory (RAM) Pada Laptop dan Komputer Dengan Sangat Mudah - Memory adalah hardware yang sangat penting keberadaannya pada setiap perangkat komputer ataupun…