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:
Tapi 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:
kode 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:
kode scrollamount=”angka” digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang
kode 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:
Cara 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:
Cara 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=”https://ridpir.com”>CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a> </marquee>
catatan : ganti https://ridpir.com dengan Url yang di inginkan.
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 KEREN
Itulah Cara membuat teks berjalan (marquee) baik di notepad, di blog (website) ataupun ditempat coding lainnya yang bisa Anda praktikkan dengan sangat mudah
Jika MARQUEE Tidak Bergerak, Silakan Klik Tautan Berikut ini Untuk Melihat Tutorial Cara Membuat Marquee
REKOMENDASI:
Cara Mengubah Ukuran Foto Menjadi 4X6 di HP dan… 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…
Rekomendasi Aplikasi Belajar Mengetik 10 Jari Untuk… Ulasan dan Link Download Aplikasi Untuk Latihan Belajar Mengetik 10 Jari Online / Offline Gratis dan Mudah Digunakan Oleh Pemula Untuk Meningkatkan Kecepatan dan Akurasi…
PC: Personal Computer Adalah, Pengertian, Sejarah,… Hi Teknozen! Berikut Penjelasan Tentang Personal Computer (PC) Beserta Pengertian, Sejarah, Komponen, Fungsi dan Manfaat Serta Contoh Gambar Personal Computer (PC) dan juga Laptop. Pangsa…
Cara Screenshot Panjang di Komputer / Laptop Windows… 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…
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… 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… 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 Menjadikan HP Sebagai Webcam di Komputer & Laptop Berikut Panduan Cara Menjadikan HP Sebagai Webcam di Laptop dan Komputer untuk Membuat Aktifitas Meeting Lebih baik Lengkap dengan Rekomendasi Aplikasi Webcam Terbaik via WiFi…
Cara Mengetahui Judul Lagu dari Video (TikTok,… 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… 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… 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…
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…
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…
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… 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…
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…
Cara Melepas dan Memasang Processor PC Cara Melepas dan Memasang Processor PC - Bukan hal yang amat sulit jika anda seorang teknisi untuk dapat melepas atau mengeluarkan processor dari tempatnya. Tetapi…
Bahaya! Ini Penyebab Mengapa Tidak Ada Windows 9,… Ridpir.ID - Mengapa Tidak Ada Windows 9? Inilah Alasannya - Setelah rilisnya windows 10 dua tahun silam, tepatnya pada tanggal 4 februari 2015 hingga sekarang…
Cara mengatasi "Monitor Going to Sleep" pada PC Cara mengatasi monitor going to sleep - Hallo Sahabat Ridpir, pada artikel pertama di blog ini saya akan memberikan sebuah tutorial tentang komputer yang mudah-mudahan…
2 Cara Mudah Menyimpan Gambar dari MS Word Cara Save Image dari Office Word - Dalam menyelesaikan pekerjaan menggunakan MS Word ini tidak jarang kita menjumpai sebuah dokumen yang terdapat gambar didalamnya yang…
Enteng! Begini Cara Mudah Melihat Spesifikasi… Cara Melihat Spesifikasi Komputer dan Laptop Windows, 7, 8 dan 10 - Secara umum, cara yang paling sering digunakan banyak orang untuk melihat Spesifikasi (spek)…
Cara Menghidupkan Komputer Beserta Gambarnya Cocok… Ridpir.ID - Lanjut pembahasan artikel seputar dunia komputer, pada kesempatan saat ini akan memberikan tutorial cara menghidupkan komputer beserta gambarnya cocok bagi pemula (newbie) sesuai…
Assalamualaikum, saya ingin nyoba di blogger tapi bagaimana cara memulainya ??? bole ngasih panduannya mas..??
Waalaikumussalam, Ikuti aja panduan artikel diatas. Dulu saya praktik juga di blogger kok. Kakaknya bisa menyisipkan skrip marquee dibagian HTML ya
mantap gan
Makasih gan
Terima kasih ya Mas.. Sangat Bermanfaat bagi Kami. Terima ya kasih… Mas… ILMUNYA MENGALIR…
Iya sama-sama….
Gan ijin copas codingnya
TERBAIK
iyaa,,.. silakan Gan 😀
Iyaa,,,, silakan Gan!!! :vvv
Sangat bermanfaat gan. saya jadi ingin mencoba!
Ijin nyoba gan