Cara Membuat WEB, Blogging dan Bahasa Pemrograman

Sabtu, 29 Desember 2012

Cara Membuat Tulisan Berkedip

Cara Membuat Tulisan Berkedip - Ada empat cara yang menyebabkan halaman Web menampilkan teks berkedip saat halaman ditampilkan dalam browser. Pertama, Anda dapat menggunakan tag HTML <blink>. Kedua, Anda dapat menambahkan deklarasi "text-decoration: blink" di file HTML halaman Web. Ketiga, Anda dapat menambahkan deklarasi "text-decoration: blink" di file Cascading Style Sheet (CSS) yang mengatur tampilan dari halaman web. Atau Anda dapat menambahkan kode JavaScript dalam file HTML halaman Web yang menyebabkan teks berkedip, yaitu, untuk muncul dan menghilang secara berulang-ulang.

Cara Membuat Tulisan Berkedip

Berikut cara-cara membuat tulisan berkedip.
1. Dengan menggunakan tag HTML
Caranya dengan menempatkan teks, judul, paragraf, table atau yang lainnya diantara <blink> dan </blink>. Contoh hasilnya seperti ini.
teks anda
Kode dari contoh diatas:
<blink>teks anda</blink>

2. Dengan menambahkan "text-decoration: blink" pada file HTML
Pertama, pastikan ada atau tidak ada kode seperti "<style type="text/css">" di file HTMLnya. Jika tidak ada, tambahkan kode seperti ini seteleh baris yang bertuliskan "<head>".
<style type="text/css">
</style>

Jika Anda ingin membuat tulisan berkedip pada suatu tulisan yang menggunakan tag <h1>, maka tambahkan kode seperti ini diantara <style type=&qout;text/css"> dan </style>.
h1 { text-decoration: blink; }

Jika Anda belum mengetahui tag-tag apa yang digunakan pada situs Anda, untuk mengetahuinya dapat dilakukan dengan cara View Page Source.
3. Dengan menambahkan deklarasi "text-decoration: blink" di file Cascading Style Sheet (CSS)
Hampir sama dengan cara yang nomor dua. Bedanya cuman penempatan kodenya saja. Pada cara yang ketiga ini, kode yang seperti
h1 { text-decoration: blink; }
diletakkan di file CSS yang Anda gunakan untuk mengatur tampilan halaman Web Anda.
4. Dengan Menggunakan JavaScript
Contoh:
Kodenya:
<script>
var str = "Teks Anda";
document.write(str.blink());
</script>

Cara Membuat Tulisan Berkedip

Catatan: Jika Anda tidak dapat melihat tulisan atau teks berkedipnya, kemungkinan browser Anda tidak men-support pada hal tersebut seperti Internet Explorer, Chrome, dan Safari yang tidak men-support JavaScript blink().

-- UPDATE 2016-06-28 --
Update terbaru:
Tag blink sudah tidak berlaku lagi alias sudah usang menurut situs MDN (Mozilla Developer Network). Dikatakan di sumber tersebut fitur tersebut telah dihapus dari Standar Web, jadi untuk browser-browser keluaran terbaru sudah tidak mendukung 4 cara di atas untuk membuat tulisan berkedip. Solusinya bisa menggunakan CSS atau JQuery (JQuery merupakan salah satu perpustakaan Javascript).

Contoh menggunakan CSS:
TULISAN BERKEDIP
kodenya:
<style>
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
</style>
<span class="blink">TULISAN BERKEDIP</span>

Contoh menggunakan JQuery:
TEKS BERKEDIP
kodenya:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
setInterval(function(){
     $(".berkedip").toggle();
},300);
</script>
<span class="berkedip">TEKS BERKEDIP</span>

Cara Membuat Tulisan Berkedip Rating: 4.5 Posted By: Yosefa Ferdianto

8 komentar :

  1. waaah,,, gimana kalau mau nambahin pada konten widget / judul2 sidebar ?? makasih mas udh share

    BalasHapus
    Balasan
    1. Cari di mana kode konten widget / judul sidebar tersebut. Bisa pake Ctrl + F. Kemudian ditambah kode blink pada tulisannya.

      Hapus
  2. Mas kalau bikin text ada kerlap-kerlipnya bintangnya kecil-kecil di judul posting seperti di website ini gmn caranya ya: www.iklanbaris-gratis.net

    BalasHapus
  3. Contoh teks berkedipnya mana ?, jadi bukan cuma posting metode cara membuat teks berkedip namun di sertai juga dengan contohnya

    BalasHapus
    Balasan
    1. Terima kasih masukannya! tapi pada artikel di atas sudah disertakan contoh-contohnya. Cuma mungkin browsernya gk support.

      "Catatan: Jika Anda tidak dapat melihat tulisan atau teks berkedipnya, kemungkinan browser Anda tidak men-support"

      kalau ente pake firefox, coba ente downgrade atau download firefox/browser lain yg versi lama. Mungkin bakal kelihatan kedap-kedipnya.

      Klo gk salah firefox versi 19 masih support blink.

      Hapus
    2. Iya benar sob, di browser saya juga sama tidak terlihat, kebetulan browsernya menggunakan firefox update terbaru?

      Hapus
  4. pantesan saya pasang blink pada HTML postingan saya tidak kedap kedip.. ternyata mozilla nya yang bermasalah toh... :D terima kasih atas pencerahannya kang.. sangat bermanfaat. ^^

    BalasHapus