Cara Memberi Efek Animasi Gradasi Pada Header Template Viomagz

Nyampling ~ Cara Memberi Efek Animasi Gradasi Pada Header Template Viomagz. Setiap blogger pasti berlomba - lomba untuk menarik minat pengunjung dengan berbagai macam cara yang ditawarkan. Mulai dari pemostingan artikel yang unik dan berkualitas dan juga kontent yang banyak dicari ataupun sebuah penawaran khusus yang bertujuan untuk membuat ramai blog mereka.

Salah satu cara yang dilakukan adalah dengan membuat tampilan blog dengan seindah dan seunik mungkin. Kemudian membuat navigasi blog agar memudahkan para pengunjung untuk menjelajah blog kita. Selain faktor kontent yang unik, faktor lain yang dapat membuat para pengunjung betah berlama - lama diblog adalah tampilan blog yang tidak membuat bosan.

Nah, kali saya akan memberikan tutorial bagaimana cara membuat atau memberi efek gardasi pada header blog. Template yang saya gunakan adalah template premium dari Mas Sugeng, Template ini namanya Viomagz, Jadi bagi kalian yang mempunyai template yang sama dengan saya maka dapat mengikuti langkah - langkah berikut ini :

1. Langkah pertama silahkan login ke blogger kalian >> Tema >> Edit Html.

2. Pasang kode CSS berikut ini, diatas ]]></b:skin>

.ignielPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 400% 400%;
    -webkit-animation: ignielGradient 15s ease infinite;
    -moz-animation: ignielGradient 15s ease infinite;
    animation: ignielGradient 15s ease infinite;
}
@-webkit-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

3. Kemudian Cari <div id='header-container'>, ganti dengan kode berikut

<div id='header-container' class='ignielPelangi'>

4. Kemudian kalian cari kode #header-container {, yang akan terlihat seperti berikut

/* HEADER */
#header-container {
 background: $(header.background.kiri);
 background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 999;
 height: 48px;

5. Hapus kode background yang sudah saya tandai dengan warna merah karena akan digantikan oleh background gradasi yang akan kita pasang. Sehingga hasil akhir setelah dihapus

/* HEADER */
#header-container {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 999;
 height: 48px;

6. Kalau sudah selesai tinggal Simpan dan lihat hasilnya.

Tips.
1. Untuk mengganti warna kalian tinggal masukkan kode warna yang kalian suka di background: linear-gradient (45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f).
2. Untuk melihat memperbesar atau memperkecil warna kalian bisa rubah background-size: 150% 150%;
3. Untuk mempercepat atau memperlambat animasi degradasinya kalian bisa rubah waktunya 15s semakin besar nilai maka akan semakin lambat animasi gradasi warnanya

Sumber CSS https://www.igniel.com/2018/05/animation-background-gradient-color-css.html

Penutup

Demikian sedikit postingan tentang "Cara Memberi Efek Animasi Gradasi Pada Header Template Viomagz"  Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.

Bagikan Artikel ini