Tutorial : Transparent Background Header (Template Designer)

Tutorial ni khas untuk pengguna Template Designer yang menggunakan template simple. Tengok contoh macam blog aku la. Ceh nak jugak promote kan. Fine jangan gaduh. Follow ape yang aku buat oke. Banyak nak kena ajar hari ni.

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Cari code ni. Pakai Ctrl+F untuk memudahkan pencarian.
/* Mobile
3. Dah jumpa, korang copy code kat bawah ni.
.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}
4. Paste code tu kat atas /* Mobile tu oke.


Now, header korang dah jadi transparent kan. Tengok, tak lawa kan ade border kat tepi tu. Jom buang die. Dush!

1. Ctrl+F, cari code ni
.content-outer {
2. Kat bawah code tu korang akan jumpa macam ni.

-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);

Nombor yang aku bagi penyakit kuning tu, korang tukar die jadi 0. Die akan jadi macam kat bawah ni.

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

3. Preview lah blog korang. Dah takde kan border tu? Magic yo!



4. Save kalau dah puas hati. Kalau tak puas hati, tanye Cik Tyrah ;)

Make sure korang jumpa .content-outer { ,
bukan .mobile .content-outer {


-Happy Trying-

Comments

cik eya aliya said…
wow,senang nye.gune photoshop ke?
Cik Tyrah said…
@cik eya aliya

header tu kah? yep gune photoshop :)
princess said…
CT . tak boleh pom .sedihnye . cane nak wt . kte pnye html xde pom /*mobile sume tu . sedih ni :'(
Cik Tyrah said…
@princess

sis gune template designer ke tak?
azwar syuhada said…
saya dah cuba..tapi tak jadi..saya guna template designer juga..asal tak jadi ye...bleh tollong buatkan tak??
azwar syuhada said…
i bring my blog..can u visit me n tolong saya..azwarsyuhada.blogspot.com
ArishaSha~ said…
Cik tyrah , boleh tolong ajarkan sha mcm mne nak buat header animated ? yang header gerak2x tu ?
nysa ningsun said…
kenape saye buat tak jadi
Cik Tyrah said…
@nysa ningsun

sila check msg kat shoutbox ek :)
Kasih Terabai said…
xdpt pon..adoi..hhuuhu
Cik Tyrah said…
@Kasih Terabai

sila check msg kat shoutbox :)
didieyaya said…
tak jumpa ni ----> /* Mobile
Cik Tyrah said…
@didieyaya

sis gune template ape?
Tyrah said…
tak jadi lahh , ade je shadow tuh . tlgg :(
didieyaya said…
ohh.. okee dah tukar. yang transparent kan header tu dah jadi..

tapi yang hilangkan shadow tuu kan.. code yang bawah .content-outer {
tu code dia lain.. so tak reti nak buat T___T..
Cik Tyrah said…
@Tyrah @didieyaya

Memang ade certain blog tak boleh buang shadow tu. If nak suruh Tyrah wat, contact kat fb :)
didieyaya said…
ohh thanks. tapi takpelaa bila dah letak background dah tak nampak dah ponn. ^____^
Anonymous said…
why sye wut x jady ?? :(
Cik Tyrah said…
@Anonymous

Maybe gune template lain. Ataupun salah letak code. Kena baca tuto tu betul2 :)
miss epa said…
sis.da buat.tak jadi pun.
Cik Tyrah said…
@miss epa

Dah try betul2? Kalau tak bole jgk, bole contact kt fb la, bia tyrah tlg buatkan.
Alhamdulillah sys thx very much. sy sbnrnya da tau cmne nk wat transparent ut, cume buang border je xtau. thx very much .. lebiu <3
Asmie said…
Thanks yerr kak tyra ;3