ikuti Young di Google News

Cara Menambahkan Efek Animasi di Judul Blogger

Cara Menambahkan Efek Animasi di Judul Blogger. Anda dapat dengan mudah menerapkan animasi judul ini di situs web blogger Anda.
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!

About the Author

Terlalu muda untuk dikritik dan terlalu dewasa untuk di nasehati :)

Posting Komentar

Cookie Consent
Young serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
Young detect it seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
Young have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.