Templete blogger VioMagz mempunyai ciri khas unik mulai pada sajian header yang sticky, selain itu juga mempunyai pengaruh warna anggun yang berkarakteristik dasar adonan (fixed colors) Animasi Gradient Color elegan pada versi template terbaru MasSuggeng.
Pengertian Gradient color yaitu sistem campur warna solid, lebih jelasnya memadukan dua warna atau lebih warna dasar RGB sehingga menjadi corak pengaruh gradasi. Skema Gradient digunakan sangat bagus digunakan untuk background header VioMagz atau template blogger lainnya melalui coding CSS Linear yang ringan.
Nah, pada tutorial kali ini saya akan menciptakan sedikit perubahan simpel pada background header VioMagz yang keren menjadi lebih keren lagi yaitu dengan menambahkan isyarat CSS gradient life. Adapun fungsinya: beckground website mempunyai tampilan pengaruh warna yang hidup dapat berubah terus-menerus secara otomatis.
Cara Membedakan Gradient atau bukan?Anda coba lihat pada template situs lain atau blog Anda sendiri kalau mempunyai warna yang bercampur berubah rubah itu artinya sudah dipasang gradasi warna.
Untuk lebih jelasnya Anda dapat coba lihat VioMag Templat Blogger Premium terbaik karya MasSuggeng yang bab headernya sudah gradient color.
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 sajian Tema > Edit HTML.
3. Pada tab HTML cari isyarat <b:skin> kemudian Copy isyarat 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 isyarat dibawah ini, kemudian hapus ganti dengan isyarat 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 isyarat No 1 dengan isyarat 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 memakai CSS untuk gradasi warna bahwasanya bukan pada templete VioMagz saja untuk tema blogger lain atau wordpress saya yakin dapat dilakukan, hanya mungkin ada beberapa isyarat yang harus dirubah.
Praktis sekali bukan coding HTML itu?
Kesimpulannya
Benar atau tidak VioMagz lebih keren dengan gradient life, menunjukan bahwa inilah tema VioMagz, alasannya yaitu tema blogger lainnya jarang sekali yang menerapkan tampilan ibarat ini. Dan untuk versi sehabis v2,2 tanpa harus melaksanakan setting lagi lantaran sudah dipasang gradasi warna.
Semoga langkah langkah di atas dapat membantu untuk modifikasi template blogger dan bermanfaat.
Artikel menarik lainnya:
Cara Menampilkan Kotak Subscribe VioMagz
Cara Modifikasi Header VioMagz tidak Sticky
 |
| 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 pengaruh gradasi. Skema Gradient digunakan sangat bagus digunakan untuk background header VioMagz atau template blogger lainnya melalui coding CSS Linear yang ringan.
Nah, pada tutorial kali ini saya akan menciptakan sedikit perubahan simpel pada background header VioMagz yang keren menjadi lebih keren lagi yaitu dengan menambahkan isyarat CSS gradient life. Adapun fungsinya: beckground website mempunyai tampilan pengaruh warna yang hidup dapat berubah terus-menerus secara otomatis.
Cara Membedakan Gradient atau bukan?Anda coba lihat pada template situs lain atau blog Anda sendiri kalau mempunyai warna yang bercampur berubah rubah itu artinya sudah dipasang gradasi warna.
Untuk lebih jelasnya Anda dapat coba lihat VioMag Templat Blogger Premium terbaik karya MasSuggeng yang bab 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 sajian Tema > Edit HTML.
3. Pada tab HTML cari isyarat <b:skin> kemudian Copy isyarat 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%}}
4. Selanjutnya... cari isyarat dibawah ini, kemudian hapus ganti dengan isyarat 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 isyarat No 1 dengan isyarat 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 memakai CSS untuk gradasi warna bahwasanya bukan pada templete VioMagz saja untuk tema blogger lain atau wordpress saya yakin dapat dilakukan, hanya mungkin ada beberapa isyarat yang harus dirubah.
Tips, supaya cepat dan kondusif dikala mengedit HTML:
- Saat mencari kode-kode HTML supaya lebih simpel dan cepat gunakan teknik Tekan Ctrl+F pada komputer.
- Sebelum melaksanakan editing template disarankan untuk melaksanakan backup dengan mendownload tema supaya kalau ada kesalahan tinggal pasang lagi.
Praktis sekali bukan coding HTML itu?
Kesimpulannya
Benar atau tidak VioMagz lebih keren dengan gradient life, menunjukan bahwa inilah tema VioMagz, alasannya yaitu tema blogger lainnya jarang sekali yang menerapkan tampilan ibarat ini. Dan untuk versi sehabis v2,2 tanpa harus melaksanakan setting lagi lantaran sudah dipasang gradasi warna.
Semoga langkah langkah di atas dapat membantu untuk modifikasi template blogger dan bermanfaat.
Artikel menarik lainnya:
Cara Menampilkan Kotak Subscribe VioMagz
Cara Modifikasi Header VioMagz tidak Sticky
