Background Template dengan Gradient

Seperti postingan saya sebelumnya, yaitu mempercantik Blog dengan Gradient, kalau kawan lupa bisa baca » disini, itu sifatnya terbatas pada Sidebar dan Footer disamping sedikit memberatkan loading juga sifatnya manual pada Blog kawan.
Tapi sekarang saya akan berbagi dengan kawan Mempercantik Blog dengan Gradient yang sifatnya otomatis yang menyebabkan loading lebih ringan dari yang manual tadi, disamping juga mencakup lebih luas yaitu sampai keseluruhan Template Blog (Header, Post Editor, Sidebar dan Footer)
Coba kawan perhatikan Gambar tersebut diatas :
Tulisan Data Pengunjung dengan dengan latar belakang (background) tersebut saya buat dengan Gradient manual yang saya tempatkan pada Sidebar dengan Gradient otomatis (artinya semua sidebar saya berlatar belakang warna biru terus menipis sampai warna putih).
Cara pembuatannya :

• Seperti biasa masuk ke account Blogger dengan ID kawan
• Pada Dasbor pilih Edit HTML
• Simpan atau Download template kawan dulu
• Cari tulisan Background sebelum / diatas kode ]]></b:skin>

Contoh Header asli dan setelah perubahan pada Template saya :

Pada Gambar diatas kode script aslinya sebagai berikut :

/* Header */

#headerbg{width:100%;margin-bottom:15px;padding-bottom:25px;border-bottom:0px solid #999797;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO43id4_0Zl99mPn5Y5tPDSK4o3mXj-04SDR9pfKHHzle9e_MwqULCo9SBFf_qimYdiQpzW0-dRjfT8bpvsvi7jrDtRqF6MyFWK8jYg2zT-pcib_icoEEWOlVSnWrwa97JhGRcs_DwT-_p/) repeat-x top left;}

tulisan yang berwarna biru tersebut adalah warna Header asli template / Blog saya kurang lebih berwarna cream, kalau kawan ingin merubah warna latar belakang / background tersebut secara polos misalnya warna biru maka kodenya menjadi seperti :background:#00F; atau #7ca9c0; atau #236C95; dan lain sebagainya yang semuanya ini merupakan kode warna biru, tapi sesuai dengan yang saya bahas sekarang tentang Gradient maka kode scriptnya  kurang lebih sebagai berikut :

/* Header */

#headerbg{width:100%;margin-bottom:15px;padding-bottom:25px;border-bottom:0px solid #999797;background: none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236C95', endColorstr='#FFF');background:-moz-radial-gradient(top, #236c95, #FFFFFF);background:-webkit-gradient(linear, left top, left bottom, from(#236c95), to( #ffffff)); url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO43id4_0Zl99mPn5Y5tPDSK4o3mXj-04SDR9pfKHHzle9e_MwqULCo9SBFf_qimYdiQpzW0-dRjfT8bpvsvi7jrDtRqF6MyFWK8jYg2zT-pcib_icoEEWOlVSnWrwa97JhGRcs_DwT-_p/) repeat-x top left;}

maka hasilnya seperti tampilan Header Blog saya ini yaitu dari atas warna biru terus menipis kebawah dengan warna putih.

Seperti yang saya sampai diawal tadi, Gradient ini bisa diterapkan pada Header, post editor, sidebar, footer maupun pada element tambahan, cara sama seperti contoh tersebut diatas, soal warna silahkan kawan yang memilihnya.

Coba kawan perhatikan kode script diatas yaitu (linear, left top, left bottom, from(#236c95), to( #ffffff)); maka hasilnya seperti BARTER LINK pada Tab Horizontal menu saya diatas. (lihat gambar disamping)

sekarang saya robah sedikit yaitu menjadi (linear, left top, right bottom, from(#236c95), to( #ffffff)); maka hasilnya akan menjadi seperti : DOWNLOADS pada Tab Horizontal Menu diatas. (lihat gambar disamping)

Silahkan kawan menentukan warnanya yang sesuai dengan selera sendiri untuk berkreasi, karena apa yang saya contohkan tersebut merupakan salah satu kreasi saja, dan yang bisa kawan robah kode warna, left, right, top dan bottom.

Kalau semuanya kawan anggap sudah OK silahkan simpan template dan lihat hasilnya, Selamat Berkreasi