Cara Mengubah Background Header

Tutorial mengubah warna background header pada template Fletro Pro
Mengubah Warna Header
Pada pembaruan terbaru fitur ini sudah dihapus, karena itu artikel ini sudah tidak relevan lagi, tapi mungkin anda bisa mencoba bereksperimen sendiri menggunakan sumber daya pada artikel ini.

Template ini sudah tersedia langsung background header (warna gradasi) yang bisa Anda aktifkan kapan saja, warna awal header pada template ini adalah transparan kemudian akan berubah menjadi berwarna ketika discroll. Bagi Anda yang tidak menyukai warna header putih polos atau jika Anda menginginkan tampilan header seperti pada template Viomagz misalnya fitur ini sangat cocok untuk Anda. Tampilannya kira-kira seperti illustrasi gambar diatas.

Menambahkan Gradasi Warna pada Header

Hal pertama yang perlu Anda lakukan adalah pergi ke bagian tema pada blogger, kemudian klik ikon titik tiga (pada bagian kanan) lalu pilih edit HTML seperti pada gambar:

Edit HTML Blogger

Anda akan diarahkan ke HTML editor Blogger, tekan ctrl + F untuk mencari tag <header id='header'> seperti dibawah ini:

<header class='header' id='header'>

// Tambahkan atribut classname 'gradient' dalam tag tersebut yang hasilnya akan menjadi seperti dibawah

<header class='header gradient' id='header'>

Bagaimana Cara Mengubah Warna Gradasi pada Header?

Warna gradasi bawaan(default) dari template ini adalah perpaduan antara warna Orange dan pink seperti dibawah ini, atau anda bisa menambahkan CSS dibawah ini untuk mencoba mengubah warna header:

/* Background Gradient */
header.gradient, header.sticky.gradient{background-image:linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98)); background-image:-webkit-linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98));color:#fff!important}

Kami menyediakan beberapa warna pilihan yang bisa Anda terapkan pada blog Anda nanti, untuk mengubahnya silahkan cari kode CSS diatas atau tekan ctrl + F kemudian ketik /* Background Gradient */ pada kolom pencarian dan ubah pada bagian yang ditandai dengan kode CSS dibawah ini:

background-image:linear-gradient(50deg,#e53935,#e35d5b)!important; /* Chrome 10-25, Safari 5.1-6 */
background-image:-webkit-linear-gradient(50deg,#e53935,#e35d5b)!important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-image:linear-gradient(50deg,#f2709c,#ff9472)!important;
background-image:-webkit-linear-gradient(50deg,#f2709c,#ff9472)!important;
background-image:linear-gradient(50deg,#136a8a,#267871)!important;
background-image:-webkit-linear-gradient(50deg,#136a8a,#267871)!important;
background-image:linear-gradient(50deg,#43cea2,#185a9d)!important;
background-image:-webkit-linear-gradient(50deg,#43cea2,#185a9d)!important;
background-image:linear-gradient(50deg,#00d2ff,#3a7bd5)!important;
background-image:-webkit-linear-gradient(50deg,#00d2ff,#3a7bd5)!important;

Jika Anda ingin berkreasi dengan warna lain kami merekomendasikan Anda untuk mengunjungi uigradients.com, terdapat ratusan koleksi warna gradasi yang bisa Anda coba, untuk menerapkannya Anda hanya perlu menyalin kode warnanya (ex: #ebeced) dan menempelkannya pada salah satu bagian yang sudah ditandai dibawah ini :

/* Background Gradient */
header.gradient, header.sticky.gradient{background-image:linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98)); background-image:-webkit-linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98));color:#fff!important}

Jika ada yang kurang dimengerti silahkan ajukan pertanyaan pada kolom komentar.

You may like these posts

2 comments

  1. CobieGh
    its not available in the updated version............ cant find the tag */Bg Gradient*/
    • Maki M.
      Yes, this feature does not work on older browsers, so I decided to remove it. But it is possible that it will be available again in the next update.
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan.
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim