Jangan membuat warna latar (background) halaman blog dengan gambar seperti zaman dulu jika tidak ingin mengorbankan kecepatan. Cukup dengan trik styling CSS yang saya bagikan berikut ini.
1. Trik warna Gradient
Masuk kepengaturan di dalam dasbor blogger, pilih tema, pilih Edit HTML. Cari kode </head> di dalam halaman editor HTML template blogger blogspot, jika sudah menemukannya tambahkan kode berikut tepat di atasnya:
<style>.header{background-color:background:#fff;
background:-webkit-linear-gradient(right,#00FF33 1%,#fff 75%);
height:auto;}</style>
#fff; #00FF33 dan #fff
Lihat DEMO
Jika ia tidak bekerja hilangkan titik (.) pada bagian depan header atau ganti dengan #. Karena setiap template menerapkan class dan ID yang berbeda dalam mendeklarasikan perintah atau pengaturan HTMLnya. Misalnya pada template bawaan versi lama Anda harus menambahkan titik sebelum tag pengaturan tadi.
Menjadi:
Mudah sekali bukan?
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!
Share:
2. Trik warna gradient Infinity
Masuk kepengaturan di dalam dasbor blogger, pilih tema, pilih Edit HTML. Cari kode </head> di dalam halaman editor HTML template blogger blogspot, jika sudah menemukannya tambahkan kode berikut tepat di atasnya:
<style>.header{background: linear-gradient(-50deg, #660000, #33FF33, #3333CC, #33FF00);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%}}}</style>
Untuk merubah warna Anda dapat mengganti kode warna CSS warna biru contohnya:
#660000, #33FF33, #3333CC, #33FF00)
Lihat DEMO
Jika ia tidak bekerja hilangkan titik (.) pada bagian depan header atau ganti dengan #. Karena setiap template menerapkan class dan ID yang berbeda dalam mendeklarasikan perintah atau pengaturan HTMLnya. Misalnya pada template bawaan versi lama Anda harus menambahkan titik sebelum tag pengaturan tadi.
3. Merubah perintah pengaturan CSS
Tidak terbatas pada header, warna gradasi dan warna infinite tentu saja dapat di terapkan ke body dan ke bagian footer blog tergantung ID atau class yang di tulis di halaman HTML template blogger. Misalnya untuk body Anda cukup merubah pendeklarasiannya dari :
<style>.header{background-color:bla bla bla);height:auto;}</style>
<style>.body{background-color:bla bla bla);height:auto;}</style>
Adelina Sofyan
contributor hanya bisa menulis artikel pendek