Cara Menambahkan Efek Animasi di Judul Blogger

Hello world! Pada kesempatan kali ini saya akan membagikan tutorial Cara Menambahkan Efek Animasi di Judul Blogger. Anda dapat dengan mudah menerapkan animasi judul ini di situs web blogger Anda.

Animasi judul animasi ini dibuat dengan bantuan html dan css. Itu tidak menggunakan JavaScript. Jika Anda ingin menerapkan animasi judul ini di blog Anda, baca posting lengkapnya dan ikuti langkah-langkah yang diberikan.

Jangan lupa untuk membuat cadangan template Anda sebelum mengubah atau menambahkan animasi ini atau apa pun ke blogger Anda. Sehingga jika ada yang salah dengan template Anda, Anda dapat menggunakan template cadangan Anda.

* * * * *

Cara Menambahkan Animasi Judul di Blogger

Langkah 1 : Pertama Buka Blogger.Com.
Langkah 2 : Setelah Login Akun Anda.
Langkah 3 : Kemudian Klik Menu Tema.
Langkah 4 : Setelah Klik Edit Html.
Langkah 5 : Kemudian tempel kode CSS di atas tag </head>

<style type='text/css'>
  /* Title Animation Css Code By www.young.my.id */
  #young {
    position: relative
  }

  #young:before,
  #young:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3%;
    height: 100%;
    transform: translateY(-50%);
    background: #6200ee;
    z-index: 1
  }

  #young:before {
    left: 155%;
    animation: light-left 1.8s infinite alternate linear
  }

  #young:after {
    right: -55%;
    animation: light-right 3.0s infinite alternate linear
  }

  @keyframes light-left {
    0% {
      left: 85%;
      opacity: 0
    }

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

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

  @keyframes light-right {
    0% {
      right: 80%;
      opacity: 0
    }

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

    100% {
      right: 0%;
      opacity: 0
    }
  }
</style>

Note : Ubah nilai yang ditandai sesuai dengan keinginan, dan kompres kode CSS dengan Minify CSS untuk memperpendek kode jika diperlukan.

Langkah 6 : Kemudian Temukan Kode Html yang diberikan Di Bawah Ini.

<div class='headerInner'>

Langkah 7 : Kemudian Ganti Dengan Kode Html Di Bawah Ini.

<div class='headerInner' id='young'>

Langkah 8 : Kemudian Jangan Lupa Klik Save Theme.

* * * * *

Kesimpulan

Pada postingan kali ini saya sudah menjelaskan Cara Menambahkan Animasi di Judul Blogger Menggunakan Html Dan Css . Semoga tutorial ini dapat bermanfaat bagi anda semua dan terima kasih telah mengunjungi blogg saya, Salam!