Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Efek Tulisan Berkedip di Blogger dengan CSS

Membuat Efek Tulisan Berkedip di Blogger dengan CSS

Membuat Efek Tulisan Berkedip di Blogger dengan CSS ― Cara membuat efek tulisan berkedip di Blogger ― Saat ini, perkembangan web designer sudah menjadi hal yang cukup penting, dalam pembuatan sebuah halaman web, tidak lepas dari pentingnya desain web, interface dan kesesuaian dengan tema demi menunjang sebuah halaman situs bisa tampil dengan lebih baik di mata pengunjung. Banyak jenis desain web yang membutuhkan berbagai style untuk menunjang web tersebut tampil sesuai kebutuhan dan lebih mudah dipahami oleh pengunjungnya.

Berbagai jenis style digunakan untuk mengatur tampilan halaman situs, termasuk juga blog seperti Blogger ini. 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

Selain menggunakan kode CSS seperti langkah-langkah di atas, kamu juga bisa membuat efek tulisan berkedip pada blog kamu menggunakan kode JS atau Javascript. Jika kamu ingin menggunakan javascript, kamu bisa menggunakan langkah-langkah yang akan dijelaskan di bawah. Terlebih dahulu perlu dipasang sintaks Javascript dengan mengikuti cara berikut ini:
  1. Buka Blogger
  2. Sebelum mulai mengubah bagian dari blog kamu, sebaiknya lakukan backup terlebih dahulu biar blog kamu tetap aman, baca cara mudah backup blog di sini.
  3. Kemudian pada bagian Tema pilih Edit HTML.
  4. Membuat Efek Tulisan Berkedip di Blogger dengan CSS
  5. Temukan kode </body> dan letakkan kode berikut di atasnya
  6. <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script>setInterval(function(){$(".berkedip").toggle();},600);</script>
  7. Kamu bisa mengatur kecepatan berkedip dengan mengubah angka 600 pada kode di atas, kode tersebut menunjukkan interval waktu dalam milidetik, jadi 1000 artinya 1 detik. Setelah selesai klik tombol Simpan

Untuk menggunakan efek tulisan berkedip dengan javascript kamu perlu menuliskan atau memasang kode <span class="berkedip">TEKS BERKEDIP</span>, di mana kelas berkedip diambil dari nama kelas yang telah ditetapkan pada kode Javascript yang dipasang sebelumnya di atas. Intinya kamu bisa menempatkan class="berkedip" di manapun kamu ingin efek berkedip tersebut aktif.

Sebenarnya kode di atas langsung aktif tanpa perlu klik apapun, ini hanya demo kalau kamu mau lihat contohnya, klik link di demo untuk mengaktifkan. Untuk melihat contohnya tulisan ini akan berkedip kalau kamu 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!

Posting Komentar untuk "Membuat Efek Tulisan Berkedip di Blogger dengan CSS"