Tutorial CSS Membuat untuk pemula Warna Background Berkedip 2025

Tutorial CSS Membuat untuk pemula Warna Background Berkedip 2025

  • Posted by:
  • Posted on:
  • Category:
    SoftwareSoftware
  • System:
    Unknown
  • Price:
    USD 0
  • Views:
    299

Tutorial CSS Membuat Warna untuk  pemula Background Berkedip [Update] 2025

Sepertinya Anda belum menyertakan paragraf yang ingin ditambahkan keyword tersebut. Bisa kirimkan dulu teks paragraf yang ingin diubah? Agar saya bisa langsung menambahkan “Tutorial CSS Membuat untuk pemula Warna Background Berkedip 2025” ke dalamnya

Cara Membuat CSS Background Berkedip di Website

Yang kalian butuhkan untuk membuat css background berkedip adalah, Browser (chrome, firefox) yang paling terbaru, dan kalian juga harus memiliki akses ke file server untuk merubah file css. Pada tutorial kali ini saya menggunakan browser google chrome, filezilla untuk mencari file style.css dan notepad++ untuk melakukan editing css.

  1. Buka website di browser, lalu klik kanan dimana aja. Pilih Inspect
  2. Sekarang kita cari class yang akan diberikan efek berkedip
  3. Gunakan tools Select Element, lalu seret crosshair ke elemen css
    Tutorial CSS Membuat Warna untuk  pemula Background Berkedip [Update] 2025
    Tutorial CSS Membuat Warna untuk  pemula Background Berkedip [Update] 2025
  4. Nanti akan muncul class elemen bernama, .ajax-search-icon
  5. Lalu kita cek ke konsol CSS untuk mengetahui dimana letak file yang bersangkutan.
    background-berkedip-css-class-2907332
  6. Lokasi file sudah ditemukan dengan nama style css, tn-style.min.css,
  7. Sekarang tinggal masuk ke FTP. Cari file tersebut, lalu edit menggunakan Text Editor.
    cara-mengedit-css-website-background-blinking-6067058
  8. Pada text editor. Kalian search (CTRL + F) .ajax-search-icon
  9. Jika telah ditemukan yang sesuai, silahkan tambahkan kode berikut ini kedalam barisan css
    .ajax-search-icon {
     -webkit-animation: kedip 1s infinite;
      -moz-animation:    kedip 1s infinite;
      -o-animation:      kedip 1s infinite;
      animation:         kedip 1s infinite;
    }
    
    @-webkit-keyframes kedip {
    0%, 49% {
        background: #EC4C51;
        color : #fff
       
    }
    50%, 100% {
        background: #f2f2f2;
        color : #000
       
    }
    }
  10. Kalian jangan lupa rubah .ajax-search-icon sesuai dengan elemen yang harus dirubah
  11. Rubah warna hex background untuk mengganti warna latar belakang yang berkedip. Ada 2 background ya.
  12. Rubah color untuk mengganti warna text dan icon yang ada didalam class .ajax-search-icon 

Save file yang telah di edit dan coba refresh ulang halaman website kalian. Jika sudah berkedip maka kalian berhasil! Kalau tidak berhasil, silahkan komentar dibawah, saya coba bantu. Sekian tutorial css singkat kita kali ini mengenai cara membuat warna background berkedip di css. Semoga bermanfaat!

Rating

0

( 0 Votes )
Please Rate!
Tutorial CSS Membuat untuk pemula Warna Background Berkedip 2025

No votes so far! Be the first to rate this post.

Leave a Reply

Your email address will not be published. Required fields are marked *