Mengganti Background Header Blog Dengan Dua Warna

Background atau Latar header blog selain bisa diganti hanya dengan satu warna, juga bisa diganti dengan dua warna. Caranya sangat mudah, tetap berpedoman pada header-outer hanya kode css nya yang dirubah.

Berikut langkah - langkahnya merubah atau mengganti background atau latar header blog dari satu warna (orange) menjadi  2 (dua) warna yaitu bagian Atas Hijau dengan kode #0c8d2a  dan bagian bawah Biru dengan kode #0d4fa9 :

Langkah 1:

Login ke blogger.com, teruskan klik Template dan Edit Template.

Langkah 2:

Carilah kode .header-outer atau yang mirip, lebih lengkapnya :

.header-outer {

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

}

Langkah 3:

Hapus semua kode di atas dan ganti dengan kode di bawah ini:

.header-outer { background-image: -ms-linear-gradient(top, #0c8d2a 50%, #0d4fa9 50%); background-image: -moz-linear-gradient(top, #0c8d2a 50%, #0d4fa9 50%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #0c8d2a), color-stop(0.5, #0d4fa9)); _background-image: none; }

 Kode css di atas adalah untuk komposisi warna bagian atas hijau dan bawah biru. Silahkan ganti kode warna tersebut sesuai keinginan.

Kalau menginginkan warna hijau di sebelah kiri dan warna biru disebelah kanan kode css nya adalah:

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

Langkah 4:
Simpan Template dan lihat hasilnya. Ilustrasi perubahan background header sebelum ganti background dan setelah ganti background bisa dilihat di Gambar 1, Gambar 2 dan Gambar 3.

Bila ada komentar atau kesulitan dalam menerapkan artikel ini silahkan isi form komentar. Selamat mencoba.

---

Artikel Terkait

---