Background Template dengan Gradient

Sekarang saya akan berbagi dengan kawan Cara Mempercantik Blog dengan Gradient. :z Apa itu Gradient ?
Menurut saya pribadi ini sangat bagus kelihatannya karena terdiri dari 2 warna yang berbeda misalnya dari warna tebal menjadi tipis. :D
Dimana saja bisa Gradient itu diterapkan ?
Lagi-lagi menurut saya pribadi dimana saja baik itu di template maupun di Gadget [Perhatikan image disamping hasilnya atau Blog saya ini].
Okey mari langsung kita praktekkan ke cara membuatnya :
Biar sekali kita membuatnya sebaiknya di tambahkan kodenya pada Template Blog misalnya Body Blog, Postingan, Sidebar, Header maupun pada footer yang penting semuanya ada Kode Background atau Background-color.

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 background pada Post Artikel Blog sebelum perubahan 

Hasilnya

.post{
background-color: #A9D0F5;
width:820px;
color: #FFF;
font-size: 12px;
font-family: Cherry Cream Soda, Arial;
margin: 0 0 20px;
padding:15px;
border:1px solid #A9D0F5;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}

Perhatikan teks yang saya beri warna Hijau #A9D0F5;

Kawan bisa menghapusnya atau antara angka 5 dengan titik koma [;] ditaruh Kode Gradient, maka hasilnya seperti berikut :

.post{ 

background-color: #A9D0F5 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B3861', endColorstr='#A9D0F5');background:-moz-radial-gradient(top, #0B3861, #A9D0F5);background:-webkit-gradient(linear, left top, left bottom, from(#0B3861), to( #A9D0F5)) no-repeat left top;

Hasilnya

width:820px; 

color: #FFF;

font-size: 12px; 

font-family: Cherry Cream Soda, Arial;

margin: 0 0 20px; 

padding:15px; 

border:1px solid #A9D0F5;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; 

}

Atau kalau  #A9D0F5 dihapus jadinya seperti ini :

.post{
background-color:   none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B3861', endColorstr='#A9D0F5');background:-moz-radial-gradient(top, #0B3861, #A9D0F5);background:-webkit-gradient(linear, left top, left bottom, from(#0B3861), to( #A9D0F5)) no-repeat left top;  

maka hasilnya seperti tampilan Posting Blog saya ini khusus pada Home Pages, karena pada Single Pages saya pakai transparent [tanpa warna]

Kawan bisa mengganti semuanya seperti yang saya sebutkan diawal tadi yang penting cari teks background 

Soal warna silahkan kawan menentukan sesuai 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