Cara Membuat Efek Cahaya Berjalan di Logo Blogger dengan CSS

Cara Membuat Efek Bayangan Berjalan Bolak-Balik pada Logo Blog

Halo, Sobat Blogger! Bagaimana kabarnya?

Pada kesempatan kali ini, saya akan membagikan tutorial tentang cara membuat efek bayangan atau cahaya berjalan bolak-balik pada logo Blogger.

Efek ini dapat membuat tampilan logo di bagian header terlihat lebih hidup, modern, dan menarik. Efeknya hanya menggunakan CSS sehingga cukup ringan dan tidak memerlukan JavaScript tambahan.

Cara Memasang Efek Bayangan pada Logo Blogger

Ikuti langkah-langkah berikut:

1. Masuk ke Dashboard Blogger.
2. Pilih menu Tema.
3. Klik ikon panah di samping tombol Sesuaikan.
4. Pilih Edit HTML.
5. Tekan Ctrl + F, lalu cari kode berikut:

]]></b:skin>

Setelah ditemukan, salin kode CSS berikut dan tempelkan tepat di atas kode tersebut:

/* Efek Cahaya Logo by anaz.my.id */
header #header-inner a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

header #header-inner a::before,
header #header-inner a::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 120%;
  background-color: rgba(255, 255, 255, 0.75);
  transform: translateY(-50%) rotate(15deg);
  pointer-events: none;
  z-index: 10;
}

header #header-inner a::before {
  left: -10%;
  animation: cahaya-kiri 3s infinite alternate linear;
}

header #header-inner a::after {
  right: -10%;
  animation: cahaya-kanan 3s infinite alternate linear;
}

@keyframes cahaya-kiri {
  0% {
    left: -10%;
    opacity: 0;
  }

  50% {
    left: 50%;
    opacity: 1;
  }

  100% {
    left: 110%;
    opacity: 0;
  }
}

@keyframes cahaya-kanan {
  0% {
    right: -10%;
    opacity: 0;
  }

  50% {
    right: 50%;
    opacity: 1;
  }

  100% {
    right: 110%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  header #header-inner a::before,
  header #header-inner a::after {
    display: none;
    animation: none;
  }
}

Setelah kode terpasang, klik tombol Simpan. Kemudian buka atau muat ulang halaman blog untuk melihat hasilnya.

Mengubah Kecepatan Efek Cahaya

Kecepatan animasi dapat diatur pada bagian berikut:

animation: cahaya-kiri 3s infinite alternate linear;

Ganti angka 3s sesuai kebutuhan:

• 2s untuk gerakan yang lebih cepat.
• 4s untuk gerakan yang lebih lambat.
• 5s untuk gerakan yang lebih halus dan santai.

Penutup

Demikian tutorial tentang cara membuat efek bayangan berjalan bolak-balik pada logo Blogger. Dengan menggunakan CSS sederhana ini, tampilan logo blog akan terlihat lebih menarik tanpa menambah beban JavaScript.

Semoga tutorial ini bermanfaat. Terima kasih sudah membaca dan selamat mencoba!