Tutorial : header bersambung dengan blog

Salam. Aku nak ajar kau buat header bersambung dengan blog :) Ne versi gimp 2. Sesiape yang takde photoshop bole laa guna tuto ne :) Kalau ada photoshop.Tapi , nak guna jugak pon bole :) Jom buat !







1. Tekan CTRL + N. Nanti keluar macam dekat atas ne :) Tetapkan width dengan height blog kau. Tekan  Advanced Options. Kau cari Fill with. Pilih Transparency. Tekan ok !.


2. Sekarang kau pegi dekat toolbox. Cari rounded corners. Kau tengok dekat bawah toolbox tu. Ada  rounded coners. Kan ada radius an ?. Kau ubahkan jadi ; 39.9 . 



3. Sekarang korang bawak mouse kau dekat bakal header kau punya hujung. Tarik dia sampai memenuhi bahagian bawah header kau. kalau terkeluar pun takpe. nanti dia jadi dashed ( - - - - - ) macam dekat gambar dekat atas : 


4. Sekarang, tekan Brush tool pulak. tukar kan color jadi warna putih. pastu just color kan dekat bakal header kau tuu.


5. Savekan bakal header kau tuu. Savekan sebagai PNG. Nanti dea kan keluar lagi box kecik. Kau just tick Save Resolution dengan Save Creation Time. SIAPP !. Eh belum lagi laa. Ape daa !. Kau just ikut tuto ne. Tapi , kau tak payah buat tranperant lagi. Kan dah tranperant ;)

UNTUK TEMPLATE DENIM SAHAJA !

Dah siap buat header. Kau just follow jea step ne. Jangan banyak tanya ne untuk apa. Kalau kau dah buat. Kau akan tahu ne untuk apa :)

Pergi Edit HTML. Ctrl+F, cari code ni.

#header {


Tengok bawah #header { tu, ada code ni :
border: 1px solid $headerBgColor; 


Delete code tu. Ctrl + F lagi, cari code ni pulak :


#content-wrapper { 


Bawah-2 tu ada code background-color: $mainBgColor; . Delete code tu. Pastu SAVE kan.


Credit  ; Kaka Manish


WARNING ! UNTK MINIMA TEMPLATE SAHAJA !


1.  cari code ini

/* Header




2. lepas tuh, korang scroll ke bawah sikit korang akan jumpe code seumpama ini


#header {  margin: 5px; border: 5px solid $bordercolor;  text-align: center;color:$pagetitlecolor;}
ok , nampak tak? ok kita kene tukarkan nombor-nombor itu semua.


yang colour purple, tukarkan kepada -10
yang colour merah, tukarkan kepada 0

ok siap sudah. previe dulu dan kemudian kalau ok tak de cacat cela sila save. thanks. 


Credit ; Afiqah

Penat aku buat tuto ne. Sampai berpeluh-peluh *nampak beno menipunye ;D Dah jadi tu komen laa. Cakap tengs jea. Bukannya susah pon.

14 ♥ (s):

SteadyCoolFunky Girl said...

Sys , Tade pon code yg ny '
#header { margin: 5px; border: 5px solid $bordercolor; text-align: center;color:$pagetitlecolor;} ' Puass cari .

ツTyra ツ said...

@SteadyCoolFunky Girl

cube awk cari kod ne dulu --> /* Header

ツTyra ツ said...

@SteadyCoolFunky Girl

cube awk cari kod ne dulu --> /* Header

Wawa Minus said...

macam nak sambungkan yg header part bawah tu dengan header yg ade perkataan tuh ?? saye pening lhaa ..

ツTyra ツ said...

@Wawa Minus

yang ade tulis copyright athirah tu ea ? tu bukan header . tapi , copyright . sme jea . tpi , cre nk letak dekat blog jea yg lain :)

SteadyCoolFunky Girl said...

@ツTyra ツ Yg tuu ad , tp , yg sys sroh cari tu tade . :((

ツTyra ツ said...

@SteadyCoolFunky Girl

ape yg ade ? and , kod yg mne ?

Farra said...

saya buat yg denim punya . tapi tak sambung sambung jugak . bila saya delete code background-color: $mainBgColor; . nnti background semua jadi transparent . tapi header tak bersambung pun :(

ツTyra ツ said...

@Farra

awak dah buat header bersambung ?.

SteadyCoolFunky Girl said...

#header { margin: 5px; border: 5px solid $bordercolor; text-align: center;color:$pagetitlecolor;} , yg ny tade .

farah said...

nk tnye..cm mne kte nk ltax gmbr n tlisn ape sume 2 ??
xpham laa.. :)

ツTyra ツ said...

@farah

tengok dekat sini ---> http://j-u-s-t-p-i-n-k.blogspot.com/2011/03/tutorial-header-transprant.html

Diy Little Sunshine said...

awak.. saya dah dapat carik code /* Header. tapi bile saya scroll bawak ckit, saya x jumpe la code #header { margin: 5px; border: 5px solid $bordercolor; text-align: center;color:$pagetitlecolor;}. Boleh tolong x?? tq.

Tyyra Lambert said...

Jumpa code ni :

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

macam mana ?