Membuat Tulisan Berkedip di Blogger (Hanya CSS)

Membuat Tulisan Berkedip di Blogger (Hanya CSS)

Dalam pembuatan sebuah halaman web, tidak lepas dari pentingnya desain web, interface dan kesesuaian dengan tema. Banyak jenis desain web yang membutuhkan berbagai style untuk menunjang web tersebut tampil sesuai kebutuhan dan lebih mudah dipahami oleh pengunjungnya.

Tidak jarang diperlukan style tulisan berkedip pada desain sebuah halaman web. Biasanya style tulisan berkedip dibuat untuk membantu menonjolkan sebuah teks agar mudah dilihat oleh pengunjung. Digunakan pada web penjualan yang menampilkan iklan, promosi, dan sebagainya.

Agar membuat teks di halaman web bisa berkedip-kedip, ada beberapa cara yang dapat digunakan, menggunakan Javascript ataupun tanpa menggunakan Javascript. Namun sangat disarankan untuk menggunakan yang tanpa Javascript agar pemuatan halaman web bisa lebih efisien dan lebih cepat. Simak pembahasan di bawah ini.

Membuat Teks Berkedip Tanpa Javascript

Cara ini tergolong direkomendasikan untuk kamu gunakan karena cara ini tidak perlu menggunakan Javascript sehingga lebih optimal pada proses indeks oleh mesin pencari jadi lebih SEO Friendly. Berikut ini contoh teks berkedip menggunakan kode CSS saja.


Memasang style

Untuk membuat teks berkedip di Blogger, kamu bisa mengikut langkah-langkah di bawah:
  1. Buka Blogger
  2. Pada bagian Tema klik tombol Edit HTML
  3. Temukan ]]></b:skin>, dan letakkan kode berikut di atasnya
  4. .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;
      }
    }
  5. Kamu bisa mengganti 1s sesuai durasi jeda yang kamu inginkan, 1s berarti jeda 1 detik (1 second)
  6. Klik tombol Simpan

Menggunakan tulisan berkedip

Untuk menggunakan tulisan berkedip pada postingan atau halaman web/blog kamu gunakan kode <span class="blink">Teks di sini</span>. Serta kamu bisa menggunakan class="blink" di mana saja kamu perlukan untuk memasang teks berkedip tersebut. Contohnya adalah sebagai berikut:

<div class="blink">Ini adalah teks berkedip</div>

Penjelasa kode

Terdapat beberapa bagian pada kode CSS di atas, agar bisa memahaminya berikut penjelasan singkat mengenai arti dan makna dari kode CSS di atas sehingga bisa membuat teks berkedip-kedip.

.blink merupakan nama class yang disisipkan pada kode HTML. Mungkin tidak perlu dijelaskan panjang. animation merupakan "nama properti" yang berfungsi untuk memberikan perintah animasi pada class blink.

Pada bagian animation terdapat beberapa bagian yaitu blink-animation 1s steps(5,start) infinite;. blink-animation merupakan nama animasinya, dapat diubah sesuai keinginan. 1s merupakan waktu delay, yaitu animasi dimulai setelah 1 detik. steps(5,start) merupakan fungsi timing.

Beberapa fungsi waktu (timing function) yang bisa kamu gunakan adalah ease, linear, ease-in, ease-out, ease-in-out, dan cubic-bezier(n,n,n,n). Kemudian bagian terakhir adalah infinite yang merupakan durasi animasi tersebut.

Pada bagian @keyframes digunakan untuk mendefinisikan animasi apa yang terjadi/ perubahan apa yang terjadi.

Membuat Teks Berkedip Menggunakan Javascript

Jika kamu ingin menggunakan javascript, kamu bisa menggunakan langkah ini. Terlebih dahulu perlu dipasang sintaks Javascript berikut ini.
  1. Buka Blogger
  2. Pada bagian Tema klik tombol Edit HTML
  3. Temukan kode </body> dan letakkan kode berikut di atasnya
  4. <script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script>setInterval(function(){$(".berkedip").toggle();},300);</script>
  5. Klik tombol Simpan

Untuk menggunakan di halaman postingan kamu, gunakan kode <span class="berkedip">TEKS BERKEDIP</span>. Sebagai contoh klik di sini.

Penutup

Itulah langkah-langkah yang bisa kamu gunakan untuk memasang dan menggunakan teks berkedip di Blogger. Semoga artikel ini bisa bermanfaat untuk kamu, jika ada hal-hal yang kurang jelas, maka jangan sungkan untuk memberikan komentar kamu di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Belum ada Komentar untuk "Membuat Tulisan Berkedip di Blogger (Hanya CSS)"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel