Cara Membuat Background Dengan Kombinasi Warna Pada Elemen Halaman Blog

Apabila pada artikel sebelumnya yang berjudul “Cara Membuat Bingkai Atau Tombol Dengan Warna Gradasi (Gradient Colour) Pada Blog”, telah saya uraikan teknik yang digunakan untuk membuat bingkai atau tombol dengan menggabungkan atau mengkombinasikan beberapa warna sebagai warna latar atau background, maka artikel ini merupakan kelanjutan atau penerapan atas pembahasan yang telah diuraikan dalam artikel tersebut. Dan bahwasanya pada artikel tersebut telah saya uraikan pula bahwa dengan menggunakan teknik ini akan dapat mempercepat proses penayangan atau loading halaman sebuah blog (terutama untuk akses internet yang menggunakan sambungan atau koneksi dengan bandwidth rendah), karena browser tidak perlu melakukan request ke beberapa server yang berbeda untuk menayangkan atau menampilkan gambar yang dipakai pada setiap elemen yang ada.

Kemudian untuk mempermudah pembahasan dan pemahaman, maka dalam artikel ini saya hanya akan menggunakan 1 (satu) buah model background dengan warna gradasi (gradient colour), seperti yang tampak di bawah ini.

Selanjutnya apabila Anda ingin menerapkanya pada halaman blog yang Anda kelola, maka kombinasi warna yang digunakan untuk membuat gradasi warna tersebut dapat Anda kreasikan sesuai dengan desain atau model tampilan halaman blog yang dimaksud. 

Oke, sekarang kita bahas satu per satu penerapan atas penggunaaan teknik tersebut untuk beberapa elemen utama yang terdapat dalam halaman sebuah blog, dalam hal ini adalah header, tab menu, dan footer. Namun perlu diingat bahwa untuk menerapkan teknik ini, terlebih dahulu Anda harus masuk ke editor template Blogger, dalam hal ini adalah dengan mengeklik menu 'Template’ >> ‘Edit HTML’ >> ‘Lanjutkan’ >> ‘Expand Template Widget’.

Header

Untuk membuat warna gradasi pada background header dengan model gradasi seperti contoh di atas, maka cari kode background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.

border: 1px solid #3d85c6;
background: #073763; 
background: -moz-linear-gradient( center top, white 50%, #3d85c6 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );

Tab Menu

Seperti teknik di atas, untuk mengubah tab menu dengan warna gradasi, maka cari kode background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.

border: 1px solid #3d85c6;
background: #073763; 
background: -moz-linear-gradient( center top, white 30%, #3d85c6 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );

Selanjutnya untuk memberikan efek hover atau efek yang tampil ketika mouse pointer diletakkan di atas salah satu menu yang ada, maka cari kode background-color: $(tabs.selected.background.color); dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.

background: #0b5394;
background: -moz-linear-gradient( center top, white 60%, #3d85c6 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );

Footer

Sedangkan untuk membuat warna gradasi pada footer, maka cari kode background: $(footer.background); dan kemudian ganti kode tersebut dengan kode CSS di bawah ini.

border: 1px solid #3d85c6;
background: #073763; 
background: -moz-linear-gradient( center top, white 50%, #3d85c6 100% ); 
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #3d85c6) );

Kemudian perlu saya tegaskan sekali lagi bahwa contoh yang digunakan dalam pembahasan ini adalah menggunakan model background dengan warna gradasi yang sama, sehingga apabila diterapkan pada blog yang Anda kelola, maka tentunya Anda harus menyesuaikan kombinasi warna yang digunakan sesuai dengan desain atau model tampilan halaman blog yang Anda kelola. Dalam hal ini adalah dengan cara mengganti beberapa kode warna yang digunakan seperti #073763; #3d85c6, #0b5394, dan juga white dengan kode dan atau warna lain yang sesuai. Perlu diingat pula bahwasanya teknik tersebut hanya dapat diterapkan pada template bawaan Blogger dan tidak berlaku untuk custom template, karena bisa jadi template yang dimaksud memiliki desain atau struktur kode yang berbeda. Selanjutnya untuk mepermudah Anda yang belum memahami bahasa pemrograman, silakan buka artikel yang berjudul "Beberapa Contoh Kode CSS Dan HTML Untuk Membuat Gradasi Warna Pada Background" untuk melihat beberapa contoh kombinasi warna beserta kode CSS maupun kode HML-nya.

Semoga berguna dan bermanfaat.

Salam.