Cara Menambahkan Efek Animasi Pelangi di Blogger

Menambahkan efek animasi pelangi pada situs Blogger Anda dapat memberikan tampilan yang menarik dan dinamis. Efek ini tidak hanya mempercantik tampilan situs, tetapi juga dapat meningkatkan interaksi pengunjung. Berikut adalah langkah-langkah untuk menambahkan efek animasi pelangi di Blogger menggunakan HTML dan CSS.

Langkah 1: Masuk ke Dashboard Blogger

Pertama, masuk ke dashboard Blogger Anda dengan menggunakan kredensial login yang benar.

Langkah 2: Backup Tema

Sebelum melakukan perubahan, pastikan untuk membackup tema Blogger Anda. Ini penting untuk menghindari kehilangan data jika terjadi kesalahan. Caranya adalah dengan masuk ke bagian tema, klik ikon panah, lalu pilih "Backup" dan unduh file tema.

Langkah 3: Buka Editor Tema

Setelah membackup tema, buka editor tema dengan cara masuk ke bagian tema, klik ikon panah, lalu pilih "Edit HTML".

Langkah 4: Tambahkan Kode CSS

Salin kode CSS berikut dan tempelkan di atas tag penutup </head>:

<style>
.stwRainbow, .stwBlurRainbow {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 23;
    background: linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132, #4086F4, #31A952, #FBBE01, #EB4132);
    background-size: 200%;
    -webkit-animation: animeBar 5s linear infinite;
    animation: animeBar 5s linear infinite;
}
.stwBlurRainbow {
    height: 10px;
    z-index: 22;
    filter: blur(10px);
    opacity: .7;
}
@-webkit-keyframes animeBar {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes animeBar {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
</style>

Langkah 5: Tambahkan Kode HTML

Salin kode HTML berikut dan tempelkan di atas tag penutup </footer>:

<div class='stwRainbow'>
    <div class='stwBlurRainbow'></div>
</div>

Langkah 6: Simpan Tema

Setelah menambahkan kode CSS dan HTML, klik tombol "Simpan" untuk menyimpan perubahan pada tema Anda.

Dengan mengikuti langkah-langkah di atas, Anda dapat menambahkan efek animasi pelangi yang menarik pada situs Blogger Anda. Efek ini akan memberikan tampilan yang lebih hidup dan menarik bagi pengunjung situs Anda.

Semoga artikel ini bermanfaat dan membantu Anda dalam mempercantik tampilan situs Blogger Anda! Jika ada pertanyaan lebih lanjut, jangan ragu untuk bertanya. 

Share Pin Share