MEMBUAT BACKGROUND DENGAN WARNA GRADIENT

Terlebih dahulu Anda harus masuk ke editor template Blogger, dalam hal ini adalah dengan mengeklik menu 'Template’ >> ‘Edit HTML’ >> ‘Lanjutkan’ >> ‘Expand Template Widget’.

Header

  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

  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

  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) );

Background diatas hanya berlaku pada tempelate bawaan blogspot saja.

Sumber: http://ilmudi.blogspot.com