Sunday, December 11

TUTORIAL : Title Sidebar Dalam Huruf Besar?


Korang pernah tak letak title kat sidebar huruf kecil tapi bila dah save dia jadi huruf besar semuanya. Kalau korang taknak jadi macam tu, senang je. 

1. Korang pegi "edit HTML"
2. Back up template korang dulu
3. tekan ctrl+F
4. search :

h2

5. Nanti korang akan jumpa kod ni :

h2 {
  margin: 0 0 1em 0;
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

6. Tukar :

  text-transform: uppercase;

kepada 

 text-transform: none;

korang jangan risau pasal "nanti nak letak huruf besar pulak mcm mana??" sebab kalau korang buat both huruf besar atau kecil dia akan keluar both... good luck :)

Sunday, April 24

TUTORIAL : Transparent Header untuk Simple Template dan Hilangkan Shadow Keliling Blog

Assalamualaikum alls, today nak bagi link ke satu tutorial yang dibuat oleh Amirah Najihah. Blog dia ni cute sangat, so do go to her blog okay. dan sekarang i rase i nak gune kata ganti nama "I" lah mulai sekarang, HAHAHA. cute kan kan kan?

okay, klik SINI untuk ke tutorial tuu..

and one more thing here, kalau korang dah transparent pastu view korang punye blog, nampak ade shadow pulak kat tepi tepi atas tu, bukan ape, kalau macam tu nampak pelik atau dalam bahasa kasar nya hodoh lah.. so i ade satu cara untuk hilangkan shadow tu,

first of all, korang kenalah pegi kat 'edit HTML' lepas tu back up template then tick 'Expand Widget Templates'

lepas tu korang tekan Ctrl + F kat keyboard and search

.content-outer {

nanti korang akan jumpe code macam ni


.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

korang tukar semua nombor 15 tu kepada 0, kalau tukar yg 15 kat bawah tu je pun takpe, sebab i pun tukar satu tu je, yg lain i biarkan, so dia akan jadi macam ni


.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .0);

ok, lepas tu korang PREVIEW dulu, bile shadow tu dah hilang atau takde apa-apa error, korang bole SAVE and have FUN ^^

P/S: tuto hilangkan shadow ni i buat sendiri, so credit tu i lah *bangga jap sebab dapat buat tuto sendiri :P

Sunday, March 20

TUTORIAL: Nak buat background pic/header transparent: PIXLR

Assalamualaikum~~
tadik, baruu jee, Ela tanya kat fb camne nak buat header transparent macam yg lina punya kat atas tuuu ↑↑↑

lina gune pixlr jee, sebab ps ni susah nak guna lah (ckp je lah kau tak pandai gune, cehh)

okay, first korang pegi kat PIXLR, then korang tekan -> Open image editor <- yg besauuu gedabauuu tuu~

pastu nanti dia kuar lah macam ni;

korang pun tekan "Open image from computer"
then pilih lah pic mana atau header mana yg korang dah siap tinggal nak transparent-kan tuu..

bila korang dah pilih, nanti dia keluar cam nih;

pastu kat tools box kat tepi tuu, korang tekan WAND TOOL (W) 
then korang tekan kat mana mana bahagian yang korang nak transparent-kan tu,
macam background warne putih dalam gambar ni;

lepas dah select macam tu korang right click pulak, tekan INVERT SELECTION
nanti selection dia kat bahagian yang berwarne hitam pulak.

pastu korang tekan EDIT→COPY
kalau nak tekan ctrl+C jee pun takpe.. sama jee..

lepas dah copy, korang tekan FILE→NEW IMAGE

nanti lepas korang dah tekan new image keluar new image box cam nih;

kat 'name' tu korang biarkan je Untitled, suka hati lah..
kat 'presets' tu pun korang abaikan jee..
kat 'width' ngan 'height' pun korang abaikan je, sebab selalunya die akan otomatik ikut saiz gambar yg korang da copy sebelum nih..
and then korang jangan lupe tick kat box 'transparent' so background dia akan jadi transparent~
then tekan 'OK'

after tekan ok, new image pun keluar, dia akan jadi cam kotak kotak (checkered) sebab mcm tu lah selalunya kalau transparent (kat ps pun macam ni)
next, korang tekan EDIT→PASTE
tapi sebelum korang paste, korang kene pastikan window utk untitled/new image tadik tu kat depan (kan ade dua window, satu window pic/header korang tadik, and lagi satu window untitled/new image yg transparent tu)

dah pastikan window untitled/new image yg transparent tu kat depan (korang klik je nanti die ke depan lah)
baru lah korang bole tekan paste, nanti hasilnya jadik cam nih;
okok, hampir siap dah tu, korang tengok betul-betul kan, kat tepi je transparent, tp kat dlm gambar masih ade spot putih tak transparent kan?

so korang klik balik WAND TOOL (W)  tu, 
then klik kat salah satu spot putih tu, pastu tekan EDIT→CLEAR, ulang utk spot yang lain...
so dia akan jadi mcm nih, background putih tadik dah jadik transparent!
sekarang korang kena save! tekan FILE→SAVE
nanti keluar camnih;

kat 'name' tu korang bole letak ape-ape name lah sebab senang nak carik kat file comp korang nanti.
kot format tu paling penting, korang kene pilih 'PNG (transparent,full quality)' kalau tak, sia sia je korang buat copy paste what so ever tadik!
after that, baru lah bole tekan 'OK'
tapi kene tunggu dulu sebab dia ckp kat situ "Working please wait..."
lepas box save image tu hilang baru lah korang boleh tutup PIXLR tu, tp kalau bole pastikan dulu yg pic/header yang dah berjaye ditransparent-kan tu dah save betul-betul ke kat komp korang, make sure tadik korang save die kat 'My Picture" ke atau save kat desktop je, lagi senang nak carik!

then korang boleh lah upload kat blogger as korang punye header~~

P/S: korang jangan takut kalau tersilap tekan, yelaah, nak tekan paste tertekan clear pulak, ape kejadahnya??? sebab korang boleh tekan UNDO, yay!! hahaha ^^"

P/S/S: first time wat tutorial, perghh ^^'