CARA MEMBUAT GRADASI WARNA PADA HEADER BLOGGER

Para desainer tema blogger mempunyai gaya dan style dalam mendesain template blogger. Misalnya Mas Sugeng dengan header menu navigasi gradasi warna, ArlinaDesign dengan gradasi animasi. Beberapa trik dapat kita intip melalui inspect elemen, walau beberapa situs berhasil menyembunyikan inspect elemen beberapa jenis browser, namun trik untuk menampilkan inspect elemen semakin bagus. Melalui itu kita dapat mengetahui bagaimana cara mereka mendesain template mereka. Paling tidak kita dapat meniru beberapa style yang kita inginkan.

 1. HEADER DENGAN DUA WARNA BERBEDA (Style Pemula)

Membuat warna header blog bawaan  menjadi dua warna secara sederhana adalah mudah misalnya untuk tema sederhana tinggal masuk ke pengaturan blog pilih TEMA lalu masuk ke "Edit HTML" cari kode dibawah ini:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}

Dengan cara menekan CTRL+F pada sebelah atas kanan akan muncul kotak dialog ketik saja .header-outer { Maka akan muncul kode yang segera dapat kita kenali sebagai untaian kode diatas. Hapus dan ganti kode yang kami sorot dengan warna kuning diatas dan ganti dengan kode yang juga kami sorot dengan warna yang sama di bawah ini:

.header-outer {
background-image: -ms-linear-gradient(left, #ADD8E6 50%, #FFB6C150%);
background-image: -moz-linear-gradient(left, #ADD8E6 50%, #FFB6C1 50%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #0c8d2a), color-stop(0.5, #0d4fa9));
_background-image: none;
}
Lalu Save/Simpan. Selesai.

2. HEADER DENGAN WARNA GRADASI TANPA ANIMASI (Style lanjutan)

Akan tetapi dua warna pada header terkadang suka menampilkan pemandangan yang kontras, walaupun warna yang kita pilih berdekatan namun terlihat jelas batas perbedaannya, pada perbedaan warna warna gradasi batas terlihat halus, cara memasangnya sama: Cari kode diatas yakni:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}

Hapus bagian bawah yang di sorot kuning keseluruhannya dan ganti dengan kode css linier yang sudah saya modifikasi dibawah ini:

background:#0F466E;
background:-webkit-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-moz-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-o-linear-gradient(right,#0F466E 0%,#5093C4 75%);
background:-ms-linear-gradient(right,#0F466E 0%,#5093C4 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5093C4',endColorstr='#0F466E',GradientType=1);
height:100px;

Silahkan bermain dengan komposisi warna dengan merobah kode warna yang saya sorot warna kuning menurut selera kita masing masing. Kode warna css dapat di telusuri di internet.
Header ini sering dipakai oleh mas Sugeng dalam membuat menu navigasinya. Gradasi warna tanpa animasi terutama  terdapat tema tema vioMag terbarunya.

3. HEADER DENGAN GRADASI WARNA ANIMASI (Style Advance)

 Sedangkan untuk membuat gradasi warna dengan efek animasi pada template sederhana bawaan blogger agar supaya mirip desainnya template infinite Arlina kita hanya perlu merobah:
.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;
}

Hapus bagian bawah yang di sorot kuning keseluruhannya dan ganti css dibawah ini:

background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);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%}}

Desain dengan header dan Navigasi menu gradasi warna animasi adalah ciri ciri khas tema tema buatan ArlinaDesizn, kami mempelajarinya dari beberapa contoh dan mencobakannya ke tema tema bawaan blogger seperti tema Sederhana, PT.Keren sekali dll. Kebanyakan tema tema itu masih meninggalkan jejak struktur dan elemen elemen penting HTML dari tema tema asli bawaan blogger namun telah di rombak sedemikian rupa. Sama halnya dengan tema tema buatan Gooyabi.

Sebagai catatan pada template berbeda yang kami uji sebelumnya kode ini diletakan dibawah kode:

#header-wrapper {background:#fff; max-width: 1000px; margin: 0 auto; position: relative;}

Dengan menghapus kode yang di sorot dengan warna kuning dan menggantinya dengan kode diatas. Setiap template memiliki struktur yang sedikit berbeda satu sama lain

Related Posts