Cara Membuat Teks Berkedip di HTML

Unduh PDF
Disusun bersama Staf wikiHow

Referensi

Unduh PDF

Teks berkedip tidak pernah menjadi bagian fungsi standar HTML, dan tidak ada metode yang seragam untuk setiap peramban. Apabila Anda hanya ingin menggunakan HTML, opsi terdekatnya adalah memakai label ( tag ) marquee (tenda) meskipun opsi ini pun tidak berfungsi di Google Chrome. Metode JavaScript lebih dapat diandalkan, dan Anda bisa menyalin tempel kode secara langsung ke dokumen HTML.

Metode 1
Metode 1 dari 2:

Menggunakan Label Marquee

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/Make-Text-Blink-in-HTML-Step-1.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/Make-Text-Blink-in-HTML-Step-1.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Metode label marquee ini sudah kuno, dan banyak pengembang yang sangat menyarankan untuk menjauhinya. Beragam peramban akan menampilkannya secara berbeda, dan pembaruan yang akan datang dapat mencegah teks bisa berkedip sama sekali. [1] [2] Pelajari pendekatan Javascript kalau Anda ingin membuat situs web profesional.
    • Google Chrome tidak mendukung atribut " scrollamount ", yang sangat diandalkan metode ini. [3] Di peramban tersebut, teks akan bergulir di halaman alih-alih berkedip.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Make-Text-Blink-in-HTML-Step-2-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Make-Text-Blink-in-HTML-Step-2-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Buka dokumen HTML dalam editor teks sederhana. Tikkan <marquee> di depan teks yang ingin dikedipkan. Lalu, tikkan </marquee> di akhirnya.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Make-Text-Blink-in-HTML-Step-3-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Make-Text-Blink-in-HTML-Step-3-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ubah label pembuka ke <marquee width="300" >. Langkah ini tidak akan mengubah ukuran fon. Ada dua alasan Anda perlu mengubah lebar teks ke angka lain:
    • Kalau tidak muat, teks akan bergulir alih-alih berkedip. Untuk mencegahnya, kita menaikkan lebar teks.
    • Pada Chrome, teks akan bergulir pada jarak yang ditentukan lebar.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/91\/Make-Text-Blink-in-HTML-Step-4-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/91\/Make-Text-Blink-in-HTML-Step-4-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Di dalam label yang sama, tuliskan scrollamount ="300" (atau angka yang sama dengan lebar). Pada setelan awal, teks marquee bergulir menyeberangi halaman. Dengan mengatur jumlah guliran ke angka yang sama dengan lebar, teks akan "bergulir" ke posisi yang sama. Hal ini menimbulka efek kedip.
    • Tampilan teks Anda sekarang seperti ini:
      <marquee width="300" scrollamount="300">Teks berkedip di sini.</marquee>.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/Make-Text-Blink-in-HTML-Step-5-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/Make-Text-Blink-in-HTML-Step-5-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Buka berkas HTML dalam peramban web untuk melihat efeknya. Jika teks berkedip terlalu cepat atau lambat, ubah kecepatannya dengan atribut scrolldelay ="500" . Angka awal delay adalah 85. [4] Perbesar angka ini supaya teks berkedip lebih lambat, atau turunkan supaya berkedip yang cepat.
    • Teks Anda sekarang tampak seperti ini:
      <marquee width="300" scrollamount="300" scrolldelay="500">Teks berkedip di sini.</marquee>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/Make-Text-Blink-in-HTML-Step-6-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/Make-Text-Blink-in-HTML-Step-6-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Banyak pengguna web yang terganggu oleh teks berkedip. Untuk menghentikan animasinya setelah mendapatkan perhatian pembaca, masukkan loop="7" . Sekarang teks akan berkedip tujuh kali, kemudian menghilang (Anda bisa menggunakan sembarang angka menggantikan tujuh).
    • Kode lengkapnya adalah sebagai berikut:
      <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Teks berkedip di sini.</marquee>
    Iklan
Metode 2
Metode 2 dari 2:

Menggunakan JavaScript

Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e2\/Make-Text-Blink-in-HTML-Step-7-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e2\/Make-Text-Blink-in-HTML-Step-7-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Di antara label <head> dan </head> di dokumen HTML, masukkan kode JavaScript berikut: [5]
    • function blinktext() {
        var f = document.getElementById('announcement');
        setInterval(function() {
          f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
        }, 1000);
      }
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Make-Text-Blink-in-HTML-Step-8-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Make-Text-Blink-in-HTML-Step-8-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Kode di atas menentukan fungsi dan menamainya dengan " blinktext " (teks kedip) Untuk menggunakan fungsi ini di HTML, ubah label <body> ke <body onload="blinktext();">.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Make-Text-Blink-in-HTML-Step-9-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Make-Text-Blink-in-HTML-Step-9-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Skrip ini hanya memengaruhi elemen dengan id " announcement ". Letakkan teks berkedip di dalam semua elemen yang memberikan Anda id tersebut. Sebagai contoh, tikkan <p id="announcement">Teks berkedip di sini.</p> atau <div id="announcement">Teks berkedip di sini.</div>.
    • Anda bisa memberikan nama yang disukai. Pastikan saja Anda memakai kata yang sama dalam skrip dan elemen id .
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Make-Text-Blink-in-HTML-Step-10-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Make-Text-Blink-in-HTML-Step-10-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Angka "1000" dalam skrip menetapkan penundaan antara kedip. Angka tersebut dalam satuan mikrodetik sehingga angka 1000 membuat teks berkedip sekali per detik. [6] Turunkan angka ini untuk mempercepat kedip, atau naikkan untuk memperlambatnya.
    • Penundaan yang sebenarnya tidak akan sepenuhnya cocok dengan angka yang dimasukkan. Biasanya kedip akan lebih singkat, tetapi bisa lebih lambat jika peramban sedang sibuk bekerja.
    Iklan

Tips

  • Anda bisa menyesuaikan tampilan teks marquee dengan atribut gaya. Coba tambahkan atribut berikut: style="border:solid".
  • Anda bisa menyertakan atribut tinggi dan lebar di dalam label marquee , tetapi kebanyakan peramban akan mengabaikannya. [7] Anda dapat menyadari perbedaannya jika menambahkan garis batas pada marquee .
  • Anda juga bisa memakai CSS Animations untuk membuat teks berkedip. Langkah ini lumayan rumit dan tidak disarankan bagi awam. Catat bahwa Anda membutuhkan dokumen CSS tertaut karena Firefox tidak mendukung CSS Animations dengan “baris” CSS. [8]
Iklan

Peringatan

  • Jangan pernah menggunakan label <blink> atau dekorasi teks CSS karena belum banyak didukung peramban modern. [9] [10]
Iklan

wikiHow Terkait

Cara
Memperbesar Volume Komputer
Cara
Memperbaiki Laptop yang Tidak Mengisi Daya
Cara
Mengatur Kecerahan Layar di Komputer Windows 7
Cara
Mengatur Komputer untuk Mengakses LAN
Cara
Mematikan Komputer Secara Otomatis pada Waktu Tertentu
Cara
Menutup Jendela Aplikasi pada Komputer dan Ponsel
Cara
Mengetikkan Simbol pada Laptop
Cara
Menghubungkan Laptop ke Proyektor
Cara
Menghubungkan Printer ke Komputer Anda
Cara
Menghubungkan Perangkat Audio ke Komputer
Cara
Membalikkan Layar Komputer Anda
Cara
Menonaktifkan Tombol Function
Cara
Menggunakan Aplikasi AirDroid pada Android
Cara
Menghubungkan Headset ke PC
Iklan

Referensi

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
  2. ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
  3. ↑ http://tutorial.techaltum.com/marquee.html
  4. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
  5. ↑ http://stackoverflow.com/questions/8360130/how-to-make-a-text-flash-in-html-javascript
  6. ↑ http://javascript.info/tutorial/settimeout-setinterval
  7. ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
  8. ↑ http://caniuse.com/#feat=css-animation
  9. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink
  1. ↑ http://caniuse.com/#feat=text-decoration

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 33.928 kali.

Apakah artikel ini membantu Anda?

Iklan