Cara Membuat Warna Gradiant Pada Header

Pada kesempatan kali ini CS akan berbagi informasi kepada anda para calon seo yang setia.. he he

Warna Gradiant yang sedang hangat-hangatnya dipergunakan oleh para master-master blogger sampai saat ini pun masih dibilang trend. Seperti apakah warna gradiant jika di aplikasikan pada sebuah template blog?

Warna gradiant yang diaplikasikan pada header blog anda, tentu akan memberikan tampilan yang sangat berbeda dan jauh dari sebelumnya.

Lihat gambar dibawah ini:


Langsung saja yaa...
Tanpa basa - basi. Berikut tutorial atau cara penempatan kodenya.

1. Seperti biasa masuk pada dasaboard blog anda kemudian ke tema / thema, setelah itu Edit HTML 
2. Cari kode seperti berikut ini : #header-container kemungkinan kode setiap template berbeda-beda. Anda bisa melakukan cara manual seperti Inspect .
3. Rubah kode warna bagroundnya menjadi linear-gradient(to right)    
4. Kemudian tempel kode dibawah ini, tepat diatas kode </head> 



<style>#header-container{background:

linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size: 320% 200%;-webkit-animation:

Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation:

Gradient 15s ease infinite;}@-webkit-keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}</style>


5. Kemudian simpan template dan lihat hasilnya

Mungkin itu saja yang dapat saya sampaikan pada kesempatan kali ini.

Semoga bermanfaat dan selamat mencoba.


Terima kasih

5 Responses to "Cara Membuat Warna Gradiant Pada Header"

  1. Wah akhirnya ketemu setelah saya nyari2 cara, mantap infonya

    ReplyDelete
    Replies
    1. Terima kasih kak atas kunjungannya, semoga bermanfaat yah.

      Delete
  2. Terimakasih sudah berbagi postingan yang saya cari :)

    ReplyDelete
    Replies
    1. terima kasih juga sudah berkunjung. semoga bermanfaat.

      Delete
  3. Terima kasih kak ats informasinya .saya cari alhamdulilah ketemu

    ReplyDelete

Berkomentarlah dengan bijak dan sesuai artikel yang anda baca.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel