Cara Membuat Header Blog Menjadi Berubah Warna like Arlina Design

Tags

Mungkin anda pernah melihat sallah saatu tamplate Desain Arlina dengan header dengan warna yang bisa berubah-ubah. Tampak keren kan ? Nah untuk itu pada kesempatan kali ini kita akan membahas cara membuat header blog menjadi berubah warna.

Sebernya bukan hanya header yang bisa di buat berubah warna seperti tampalte arline design tapi juga bisa footer, navbar bahkan baground utamaa blog. hal yang diperlukan hanya mengetahui CSS warna dan bagaimana cara pemasangannya. Untuk itu kali akan dibahas cara membuat header menjadi berwarna-warni. 


Langkah Awal, masuk ke dashboard blog sobat, masuk ke Tema kemudian edit HTML. Pada sekupulan script tersebut cari kode #header-wrapper.


Biasanya kode header wrapper dibawahnya selalu dilengkapi dengan sricpt backgound seperti screenshot berikut :





Nah, ganti kode di depan background dengan kode berikut :


linear-gradient(279deg, #d1dd2f, #174fd9, #72f7f2, #b0129c);
background-size: 800% 800%;
-webkit-animation: AnimationName 30s ease infinite;-moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes gradient {
    0%{background-position:0% 31%}
    50%{background-position:100% 70%}
    100%{background-position:0% 31%}

}
@-moz-keyframes AnimationName {
    0%{background-position:0% 31%}
    50%{background-position:100% 70%}
    100%{background-position:0% 31%}
}
@keyframes AnimationName { 
    0%{background-position:0% 31%}
    50%{background-position:100% 70%}
    100%{background-position:0% 31%}
} 
Kemudian simpan tema dan lihat hasilnya.

bagi anda yang ingin memodifikasi warnanya anda bisa mengganti kode warna pada linear-gradient pada script diatas (script yg berwarna) dan menggatinya dengan kode warna HTML lainnya.

Bukan hanya diheader, anda juga bisa menerapkan script ini di widge lain selama anda mengetahui script widge tersebut.


Artikel Terkait

1 komentar


EmoticonEmoticon