Ensiklopedia Doktor Chenta

Monday, 6 February 2012

tutorial buat background pada sidebar


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 eiyqa 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!

No comments: