Cara mudah membuat tulisan berkedip pada blog

Faronesia.com - Hay sahabat faronesia, pastinya dalam pembuatan sebuah halaman web, tidak lepas dari pentingnya desain web, interface dan kesesuaian dengan tema. Banyak sekali jenis desain web yang membutuhkan berbagai style untuk menunjang web tersebut tampil sesuai kebutuhan dan lebih mudah dipahami oleh pengunjungnya.

Nah pada kesempatan kali ini kita akan membuat tulisan berkedip menggunakan html dan CSS saja. Cara ini sangat rekomended sekali karena tanpa menggunakan javascript sehingga web/blog lebih optimal saat pemuatan atau loading. Tutorial ini dibuat dengan sesimpel-simpelnya namun mudah dipahami.

Agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara mudah membuat tulisan berkedip pada blog


  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode ]]></b:skin> lalu tambahkan kode CSS dibawah ini tepat diatas kode tadi
.farokedip {
  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;
  }
}
  • Setelah itu simpan template
  • Selanjutnya, pasang kode HTML berikut ini sesuai keinginan anda (widget, dalam postingan, atau halaman statis)
<div class="farokedip">Ini adalah teks kedip</div>
  • Selesai, lalu simpan

Ini adalah teks berkedip
Keterangan singkat CSS teks kedip/blink diatas
  • .farokedip = merupakan nama class yang nantinya disisipkan pada kode HTML.
  • animation = merupakan nama properti yang berfungsi untuk memberikan perintah animasi pada class farokedip.
  • blink-animation = meruapkan nama animasinya, dapat diubah sesuai keinginan.
  • 1s = merupakan waktu delay, yaitu animasi dimulai setelah 1 detik.
  • steps(5,start) = merupakan fungsi timing.
  • infinite = merupakan durasi animasi perulangan tanpa batas.
Demikianlah mengenai Cara mudah membuat tulisan berkedip pada blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel