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.

Atau mendekati gaya gaya itulah.

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;

Dalam beberapa kondisi, sesuai dengan struktur tema blogger, sobat cukup menambahkan kode css yang saya warnai dengan merah saja.
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.

Sekalian menjawab pertanyaan: Pada tema tema premium/berbeli posisi dari header terdapat sedikit perbedaan misalnya pada template Mas Sugeng viomag yang terkenal itu anda harus mencari kode:

/* HEADER */
#header-container {

Gunakan saja ctrl+f pada halaman editHTML dan masukan kode  #header-container { setelah ketemu hapus semua kode di bawahnya, yakni:

background: $(header.background.kiri);
background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
height: 48px;

}

Kemudian gantikan dengan kode infinite di bawah ini:

background: linear-gradient(-50deg, #F0FFFF, #FFB6C1, #20aadb, #87CEFA);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%}}


Save.

11 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Saya pake template mas sugeng. Apa bisa dirubah juga mas ?

    BalasHapus
    Balasan
    1. Sekalian menjawab pertanyaan: Pada tema tema premium/berbeli posisi dari header terdapat sedikit perbedaan misalnya pada template Mas Sugeng viomag yang terkenal itu kita harus mencari kode:

      /* HEADER */
      #header-container {

      Gunakan saja ctrl+f pada halaman editHTML dan masukan kode #header-container { setelah ketemu hapus semua kode di bawahnya, yakni:

      background: $(header.background.kiri);
      background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));
      -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
      box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 999;
      height: 48px;
      }

      Kemudian gantikan dengan kode infinite di bawah ini:

      background: linear-gradient(-50deg, #F0FFFF, #FFB6C1, #20aadb, #87CEFA);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%}}

      Save.

      Hapus
    2. Trims penjelasannya mas

      Hapus
    3. kelemahan lain adalah: header akan kehilangan sticky karena kehilangan perintah:

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 999;
      height: 48px;
      }

      Hapus
    4. ya begitulah, tapi bisa di modifikasi kok. Walaupun gak pake sticky juga gpp

      Hapus
  2. Apakah animasi tak akan memperberat loading blog mas?

    BalasHapus
  3. Tergantung, kalau menurut kami animasi ini tidak terlalu memberatkan loading, benar memang berpengaruh sama seperti ketika kita memposting gambar ukuran besar. Bedanya kalau animasi diheader beban loadnya menetap di homepage blog.

    BalasHapus
  4. Ini mantap benar semua bisa dijadikan keren dengan gradasi di template, thanks U.

    BalasHapus
  5. gak ngerti...pening dan berkunang kunang aku

    BalasHapus
    Balasan
    1. Kalau begitu saya salah memberikan tutorial. Saya minta maaf dan akan mencoba lebih sederhana lagi

      Hapus
Lebih baru Lebih lama

Formulir Kontak