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:
Anda akan diarahkan ke HTML editor Blogger, tekan ctrl + F untuk mencari tag <header id='header'> seperti dibawah ini:
<header id='header'>
// Tambahkan atribut classname 'gradient' dalam tag tersebut yang hasilnya akan menjadi seperti dibawah
<header id='header' class='gradient'>
Bagaimana Cara Mengubah Warna Gradasi pada Header?
Warna gradasi bawaan(default) dari template ini adalah perpaduan antara warna Orange dan pink seperti dibawah ini:
/* Background Gradient */
header.sticky.gradient, #sticky-button,
#blog-pager a:hover, .search-suggest ul li a:hover, #sidebar .Label .cloud-label-widget-content a:hover, .night-mode main #blog-pager a,
.night-mode header .menu-container li.setting-menu li span.table i:before,
.night-mode header .menu-container li.setting-menu li input:checked + .table i:before, .chat-container .chat-header, .button
{background-image:linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98))!important; background-image:-webkit-linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98))!important;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;
Catatan : Perubahan ini akan berlaku pada semua warna gradasi dalam template, termasuk tombol link, tombol submit dan sebagainya.
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.sticky.gradient, #sticky-button,
#blog-pager a:hover, .search-suggest ul li a:hover, #sidebar .Label .cloud-label-widget-content a:hover, .night-mode main #blog-pager a,
.night-mode header .menu-container li.setting-menu li span.table i:before,
.night-mode header .menu-container li.setting-menu li input:checked + .table i:before, .chat-container .chat-header, .button
{background-image:linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98))!important; background-image:-webkit-linear-gradient(50deg,rgba(255,65,108,.98),rgba(242,151,46,.98))!important;color:#fff!important}
Jika ada yang kurang dimengerti silahkan ajukan pertanyaan pada kolom komentar.
Post a Comment
Post a Comment