12 January 2013

Tutorial : Gradient Background

Assalamualaikum, Salam Sejahtera. :)
Bismillahirrahmanirrahim..

Post title/sidebar gradient background ni boleh view kalau korang guna Google chrome sahaja. Kalau pengguna Mozilla Firefox, rasanya tak boleh :)

Classic Template/Blogskin users:
1 Dashboard > Template
2 Find your post title/sidebar title codes. Delete codes bawah dia, Copy codes di bawah ni dan pastekan di bawahnya.
3 Preview, Save

Template Designer :
1 Dashboard > Template > Edit HTML > Proceed
2. Cari codes ni (ikut anda nak ubah yang mana)

POST TITLE : .post-title {  ATAU   h3.post-title, .comments h4 {
SIDEBAR TITLE : .sidebar h2 {  ATAU   h2 {
BLOCKQUOTE : blockquote {   ATAU  .post blockquote {
POST FOOTER: .post-footer {
code-code lain cari sendirik ye. malas nak taip heheh :b

Live Preview :

This is an example of gradient background #1
color:#ccc;
padding:4px;
margin-top:5px;
line-height: 100%;
background-image: -webkit-linear-gradient(left, #FFBAD1, #FFFFFF, #FFFFFF, #FFBAD1);
text-align: center;
}

Live Preview :

This is an example of gradient background #2
color:#ccc;
padding:4px;
margin-top:5px;
line-height: 100%;
background-image: -webkit-linear-gradient(left, #FFBAD1, #FFFFFF, #FFFFFF, #FFBAD1);
text-align: center;
}

Live Preview :

This is an example of gradient background #3
color:#ccc;
padding:4px;
margin-top:5px;
line-height: 100%;
background-image: -webkit-linear-gradient(left, #FDFFBA, #BAFFBC, #F5BAFF, #FDFFBA);
text-align: center;
}

  • text-align: center; boleh buang kalau tak nak perkataan dia di tengah/center. Ataupun boleh tukar center kepada left atau right :)
  • WARNA OREN, semua boleh ubah ikut warna yang anda suka okay? Ikut kreativiti anda ^_^ Codes warna boleh ambil DI SINI

Jadi tak? Kalau tak paham boleh komen di post ni atau di tab Ask (ada di sidebar). SERTAKAN SEKALI URL BLOG ANDA YA.
Assalamualaikum

[NI ADALAH AUTOPOST. TUAN BLOG ADA DI ASRAMA, NANTI KALAU BALIK INSYAALLAH SEGALA KOMEN DAN PERTANYAAN AKAN DIJAWAB :) Terima kasih..]

4 comments:

Your words defines you