salam my dear bloggie yang sudi singgah blog wawa
hari ni wawa nak ajar korang cara nak letak transparent header yang korang dah edit bagai-bagai tu dekat blog korang.mesti laa rugi saja kalau korang dah berjaya buat header transparent korang sendiri,tapi bila upload,dia tak jadi transparent pun..tapi korang jang laa risau yea.wawa ada cara nak tolong korang tau.so kalau korang dah ready,come on laa..nak tunggu apa lagi,kita mulakan sekaran :)

nota penting:

ini bukan tutorial cara buat header transparent guna sebarang software photo editor.korang kena create header transparent korang sendiri guna photoshop,photoscape,gimp atau apa-apa software yang lain sebelum ikut tutorial ni okeyyyhh?

1. make sure korang dah siapkan header yang transparent sebelum baca follow tutorial ni.sila rujuk gambar dekat bawah..ini adalah transparent header yang wawa buat untuk my dearest little sister,farra arisha.


2. sekarang korang boleh laa upload header korang yang transparent tu dekat blog korang,tapi nanti header korang mesti jadi macam gambar dekat bawah ni kan?


3. soalan lazim blogger *"eh eh..kenapa tak jadi transparent pula ni?" sabar yea korang,tak perlu nak risau.sekarang korang pergi tekan dashboard design edit HTML (klik expand widget template)

4. korang tekan ctrl+f dan cari code /* Mobile

5. korang dah jumpa code tu? bagus :) sekarang korang copy code dekat bawah ni dan paste di atas atau sebelum code /* Mobile yang korang cari tadi.

.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}

6. korang dah siap paste code dekat atas tu,sekarang korang boleh laa tekan save template.bila korang pegi view blog korang tu..korang nampak header korang dah jadi transparent macam yang sepatutnya,tapi tiba-tiba ada shadow yang buruk pula dekat keliling header dan blog. "adooii..nak buat macam mana pula ni,nampak cacat saja blog aku." :) relax relax..tarik nafas dalam-dalam dan sambung step yang seterusnya sebab tutorial ni tak habis lagi okeyyh.


7. sekarang korang tekan semula dashboard design edit HTML (click expand widget template)

8. korang tekan ctrl+f dan cari code .content-outer {

9. bila korang dah jumpa,mesti korang nampak macam dekat bawah ni kan?



10. sekarang korang perlu tukar semua nombor yand ada dekat bawah code .content-outer { yang korang cari tadi jadi 0.sila lihat pada gambar sebagai rujukan.

ini adalah code asal:

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


margin-bottom: 1px;
}

ini setelah korang ubah semua nombor dalam kurungan sahaja jadi 0:

.content-outer {
-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);


margin-bottom: 1px;
}

gambar rujukan:


11. sekarang korang boleh laa tekan save template sekali lagi :) dan pegi view blog korang tu,mesti dah hilangkan shadow yang buruk dan cacat tu? ^___^



12. kalau dah berjaya..rajin-rajin laa tinggalkan comment dan tekan button like dekat sidebar wawa :)

Older Post | Newer Post