Cara Merubah Beckground Header VioMagz Menjadi Gradasi Warna Keren

Templete blogger VioMagz mempunyai ciri khas unik mulai pada menu header yang sticky, selain itu juga memiliki efek warna cantik yang berkarakteristik dasar campuran (fixed colors) Animasi Gradient Color elegan pada versi template terbaru MasSuggeng.

Header Blogger dengan Gradasi Warna Hidup

Pengertian Gradient color yaitu sistem campur warna solid, lebih jelasnya memadukan dua warna atau lebih warna dasar RGB sehingga menjadi corak efek gradasi. Skema Gradient digunakan sangat bagus dipakai untuk background header VioMagz atau template blogger lainnya melalui coding CSS Linear yang ringan.

Nah, pada tutorial kali ini saya akan membuat sedikit perubahan simpel pada background header VioMagz yang keren menjadi lebih keren lagi yaitu dengan menambahkan kode CSS gradient life. Adapun fungsinya: beckground website memiliki tampilan efek warna yang hidup bisa berubah terus-menerus secara otomatis.

Cara Membedakan Gradient atau bukan?Anda coba lihat pada template situs lain atau blog Anda sendiri jika memiliki warna yang bercampur  berubah rubah itu artinya sudah dipasang gradasi warna.

Untuk lebih jelasnya Anda bisa coba lihat DEMO langsung atau baca Review VioMag Templat Blogger Premium terbaik karya MasSuggeng yang bagian headernya sudah gradient color.

Modifikasi Header VioMagz menjadi Gradient

Berikut cara mengganti warna header templete VioMagz blogger menjadi color move life atau gradasi warna yang hidup.

Ikuti langkah berikut:

1. Masuk ke blogger.
2. Pilih menu Tema > Edit HTML.
3. Pada tab HTML cari kode <b:skin> lalu Copy kode dibawah ini: kemudian Paste dibawah <b:skin>

#header-container, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-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%}}
#header-wrapper{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-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%}}

Kalau sudah biarkan dulu.

4. Selanjutnya... cari kode dibawah ini, lalu hapus ganti dengan kode ke 2 dibawanya:

Kode No 1

#header-container { background: $(header.background.color); color: #fff; -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }

Ganti kode No 1 dengan kode No 2 dibawah ini:

Kode No 2

#header-container { -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }

5. Selesai tinggal klik Simpan Tema.

Catatan!
Dalam menggunakan CSS untuk gradasi warna sebenarnya bukan pada templete VioMagz saja untuk tema blogger lain atau wordpress saya yakin bisa dilakukan, hanya mungkin ada beberapa kode yang harus dirubah.

Tips, supaya cepat dan aman ketika mengedit HTML:

• Saat mencari kode-kode HTML supaya lebih gampang dan cepat gunakan teknik Tekan Ctrl+F pada komputer.
• Sebelum melakukan editing template disarankan untuk melakukan backup dengan mendownload tema supaya jika ada kesalahan tinggal pasang lagi.

Mudah sekali bukan coding HTML itu?

Kesimpulannya

Benar atau tidak VioMagz lebih keren dengan gradient life, menandakan bahwa inilah tema VioMagz, sebab tema blogger lainnya jarang sekali yang menerapkan tampilan seperti ini. Dan untuk versi setelah v2,2 tanpa harus melakukan setting lagi karena sudah dipasang gradasi warna.

Semoga langkah langkah di atas bisa membantu untuk modifikasi template blogger dan bermanfaat.

Artikel menarik lainnya:

Cara Menampilkan Kotak Subscribe VioMagz

Cara Modifikasi Header VioMagz tidak Sticky