05 March 2013

Tutorial : Gradient Bakground

Assalammualaikum.
Dashboard > Template > Edit HTML > Tick Expand Widget Templates

Cari code background yang korang nak tu untuk tukar kepada gradient background.

Background yang ada gambar ke warna ke buang code tu. Ganti dengan code gradient yang korang pilih dekat bawah ni. Btw, jangan buang semua code pulak ye.

Post Title:
.post-title { 
h3.post-title, .comments h4 { 

Sidebar :
.sidebar h2 { 
h2 { 

Blockquote:
blockquote { 
.post blockquote { 

Post Footer:
.post-footer {
Bila dah jumpak bahagian background yang korang nak tukar tu pilih gradient background dekat bawah ni. Pilih yang maa korang nak. Lepas tu copy dan paste macam biasa. Yang tak faham tu silalah tanya dekat comment sini .

Contoh gradient bahagian 1

background-image: -webkit-linear-gradient(left, #BE81F7, #FFFFFF, #FFFFFF, #BE81F7);
text-align: center;
}

Contoh gradient bahagian 2

background-image: -webkit-linear-gradient(left, #FFFFFF, #BE81F7, #BE81F7, #FFFFFF);
text-align: center;
}

Contoh gradient bahagian 3

background-image: -webkit-linear-gradient(left, #BE81F7, #BE81F7, #FFFFFF, #FFFFFF);
text-align: left;
}

Contoh gradient bahagian 4

background-image: -webkit-linear-gradient(left, #FDFFBA, #BAFFBC, #F5BAFF, #FDFFBA);
text-align: center;
}


NOTE:
Merah: Tukar kepada warna yang korang nak ye

Credit : Faqihah Husni 



2 comments:

izzaty sidrus™ said...

Cantiknya ! nak try lah nanti

An-Nur Al-Insyirah said...

Assalamualaikum. Saya x jumpa expand widget templates 2. Tolong sye...