Tutorial : Buat background pada sidebar

As-salam...

Ada yang tanya macam mana aku buat background pada sidebar ni kan. Minta maaf banyak-banyak sebab ramai yang request tutorial tapi disebabkan kesibukkan sebagai pelajar jadi lambat pula semua tutorial tu ditunaikan.  Mohon ampun yer, jangan merajuk-merajuk..sabar kan separuh dari iman...good!


Tanpa melengahkan masa, mai cikgu emieysandra ni tunjukkan..ahaksss, tercekik lak megi yang baru masuk ke dalam mulut ni.  (motif : baru pas makan megi ~lalaaalaa)


Bukak Dashboard - Design - Edit HTML.
Cari kod ni..

h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}



Bila dah jumpa, gantikan semua kod kat atas tu dengan kod yang ni..


h2 {
text-align:center;
-moz-border-radius: 10px 10px;
border-radius: 40px 40px;
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: normalcase;
background:url(url image)
}


Gantikan url image tu dengan url image yang u all berkenan. Macam aku ni, masukkan warna kosong je tanpa corak sebab tak berkenan dengan mana-mana wallpaper bercorak lagi.  U all cari la yang cantik-cantik tapi jangan sampai tak leh baca tulisan di tajuk sidebar tu pulak. Pesanan ikhlas ni tau.


PERHATIAN!! Berkenaan kod yang dipaste tadi.
text-align:center;
 >>untuk centerkan tulisan di tajuk sidebar tu. Kalau tak nak center, tak payah la masukkan bahagian ni.


-moz-border-radius: 10px 10px;
border-radius: 40px 40px;

>>untuk design background yang melengkung. Kalau tak nak design yang melengkung, tak payah masukkan kod ni, ia akan jadi bentuk segiempat biasa.



text-transform: normalcase;
 >>untuk tulisan yang biasa, maksudnya u all boleh tulis tajuk kat sidebar macam ni = 'i lOve u'  (aku memang suka gunakan huruf O besar) jadi, ia akan display macam tu jugak. Kalau nak ia display semua huruf besar boleh tukarkan kepada 'uppercase' ataupun semua huruf kecil tukar kepada 'lowercase'.



Pstt : Senang je kan tutorial ni, just paste kan kod yang aku bagi tu dan cari image yang lawa-lawa.  Selamat mencuba!



16 comments:

Miza Yusof said...

thanks emiey :)

emiey, boleh tak miza nak request tutorial border keliling entry macam amy ni. boleh ajarkan tak ?

shaffique said...

thanks for the tutorial. lame dah nk carik tutorial ni. ;)


My latest entry : T-Shirt 'You Like This'

cikgu ainura said...

aiks.. xkan kat umah pon makan magie gak yang... akq, nk suh awak watkan laa.. xnk wat senidir...

emieysandra said...

feveret tuh..haha

platipus said...

blog tutorial pilihan platipus ni..grr!

Wan Gerrard said...

hmm thanks, letak gambar best2 la pasni :P

twinkle twinkle said...

thnx 4 this tuto ;D

Bella said...

wah..finally jumpa juga tutorial nie..thanks! :)

pelangi_aien said...

umm , akak . buat background untuk sidebar sahaje ke ? title post background ? knpe ta bulejugakk. umm lagi satu . if tuka layout ape yg kite edit hilang knape ?

emieysandra said...

dah mmg blogspot cmtu, nak wt cmne dik..ehehe

Cikgu Fikri said...

kak emiey..
wah, rajin wat tuto..
hehehe :)

cik Aisy' Humaira said...

thanx utk tuto nih!!
suke3~
sb menjadi.
hehe

monster hijau said...

tq yepp emy!

tengok boleh said...

na amel url cmne ??

Nurul Najwa Kornain Official Blogspot said...

da jadi yaww. makasih ya :)

Misshy Innz said...

tq emieysandra for the tutorial .
menjadi ! ;)