Cara Mewarnai Template Blog Dengan Animasi Gradasi Warna Dengan Mudah

Sebelum saya mulai saya mohon maaf kepada yang punya gambar ini ,, ane pake gk minta izin dulu... hehehe...
OK....
langsung aja ya?  Cara Mewarnai Template Blog Dengan Animasi Gradasi Warna Dengan Mudah

1. login dulu keblogger
2. Masuk Ke Template / Tema > Edit HTML
3. Copy CSS di bawah ini letakan kode di Atas ]]></b:skin> Atau </style>

.animasigradasi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: ignielGradient 12s ease infinite;
    -moz-animation: ignielGradient 12s ease infinite;
    animation: ignielGradient 12s 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%}
}

Anda juga bisa ganti warana Css ini dengan warana kesukaan nya : kode warna ya ane udah kasi tanda merah.  anda bisa ganti  warna pilih anda , bisa liat code warna disini ingat dengan cara [ kodewarna-koma-spasi baru kode warna lagi contoh : seperti #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f  ini ] jadi hasilnya seperti ini background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f)
Ok simpan template

pabila di ]]></b:skin> Atau </style> tidak bisa. : anda bisa  menepatkanya di atas code </head/> atau &lt;/head&gt;&lt; {untuk mempermudah menenmukanya Ctrl + F }  . tapi dengan cara menggunakan kode seperti ini :
</style>
kode Css disini....
<style>

4. Ok next deh ..Cara Penerapan Di Blog
contoh yg kita mau ubah adalah header
Tinggal tambahkan class animasigradasi ke elemen yang diinginkan.
Contoh kalau mau bikin efek gradasi warna bergerak di bagian header:
Cari kode <div id='header'>
Tambahkan class, sehingga hasilnya menjadi <div id='header' class='animasigradasi'>
Contoh :
<!-- SEBELUM -->

<div id='header'>
  ...
</div>
<!-- SESUDAH -->

<div id='header' class='animasigradasi'>
  ...
</div>
- Jika sudah ada class, tambahkan di belakang class sebelumnya.

<!-- SEBELUM -->

<div id='header' class='header'>
  ...
</div>

<!-- SESUDAH -->

<div id='header' class='header animasigradasi'>
  ...
</div>

5 Save Template 
nah .. kelar  Tapi pabila di atas malah berantakan hasil nya jagan berputus asa , banyak jalan menuju rumah tersayang ...
ini dia jurus terapuh :
pabila cara di atasa tidak work n tidak berhasil malah hasil nya 0 besar  ni-jlan nya :

<div class='animasigradasi'>
<div id='header'>
  ..............

</div>
</div>

Atau  

<div id='header'>
<div class='animasigradasi'>
  .............

</div>
</div>
Sedikit penjelasan : 
klau <div class= yang css berawalan titik contoh : <div class='animasigradasi'> sedang yg berawalan css nya # pagar <div id=' contoh : <div id='animasigradasi'> tapi haru di tutup dengan </div>

setelah itu kita sedikit ke ke Css header dengan cara naik motor ...brum....
Ctrl + F cari header sampai ketemu
/* Header */ atau /* Header cewek */ atau apalah yg ter tulis di <div id='header'>
kalau sudah ketemu . perhatikan #header{background:#fff; atau #header{position:relative;{background:#fff; em.. atau bagai mana gitu yg jelas kita cuma cari background:#fff;
Kalau sudah ketemu kaya itu hapus kode wanrna nya seperti ini :

Sebelum : background:#fff;

Sesudah: background:; bisa juga ganti dengan tulisan : transparan atau terang terus hasilnya gini : background:transparan;


Kolom komentarlah ..