Templete blogger VioMagz mempunyai ciri khas unik mulai pada sajian header yang sticky, selain itu juga mempunyai pengaruh warna manis yang berkarakteristik dasar adonan (fixed colors) Animasi Gradient Color elegan pada versi template terbaru MasSuggeng.
Pengertian Gradient color ialah 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 ialah dengan menambahkan arahan 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 arahan <b:skin> kemudian Copy arahan 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 arahan dibawah ini, kemudian hapus ganti dengan arahan 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 arahan No 1 dengan arahan 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 sebetulnya bukan pada templete VioMagz saja untuk tema blogger lain atau wordpress saya yakin dapat dilakukan, hanya mungkin ada beberapa arahan 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 tema blogger lainnya jarang sekali yang menerapkan tampilan menyerupai 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 ialah 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 ialah dengan menambahkan arahan 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 arahan <b:skin> kemudian Copy arahan 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 arahan dibawah ini, kemudian hapus ganti dengan arahan 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 arahan No 1 dengan arahan 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 sebetulnya bukan pada templete VioMagz saja untuk tema blogger lain atau wordpress saya yakin dapat dilakukan, hanya mungkin ada beberapa arahan yang harus dirubah.
Tips, supaya cepat dan kondusif saat mengedit HTML:
- Saat mencari kode-kode HTML supaya lebih praktis 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 tema blogger lainnya jarang sekali yang menerapkan tampilan menyerupai 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