Wednesday, 20 June 2012 - Permalink - 0 Chocoliciou (s)
Okea, sini ada sedikit sebanyak Freebies untuk korunk okea,
First, nak buad annoucement bout kerja,
Sila buat blockquote kat Miss k, sapa yang nak
Miss pay tau!
info Miss kat FB..
FACEBOOK - [ Jangan Lah Klik Oi! ] - Send Message..
Main Topic kita Jom Buat Header Comey Melotey!!
Mesty rugi kan lau suruh Online service untuk buat header korunk kan?
Yela, sekali buat [ RM5] [ RM3 ] [ RM2 ] kan??
dah la banyak prosedur kena buat,
INFO STYLE HEADER - KENA TUNGGU - BANK IN
Ada hasil yang menerujakan, ada yang REBEH [ bereh apabila diterbalikkan ]
Baik buat header sendiri, lau rasa nak tambah pape ker pada header, boleh buat..
citarasa korunk pom ikut tekak korunk kan?
okea, mengaban dah, jom buat transparent header, center header, header hover oke??!
cekidout ma lets go!
First thing korunk kene ada ialah PHOTOSHOP !
takde photoshop? boleh guna tutorial [ INI ] pada yang takde photoshop. tapi paling puas hati adalah dengan menggunakan adobe photoshop. sebab? gambar lebih terang dan tak blur bila kita upload dekat blog.
aku nak share yang paling simple. dah pandai nanti, korang guna la kreativiti korang ok. aku pun tak pandai sangat. just buat simple simple je
bahan yang diperlukan.
- adobe photoshop
- gambar yang korang nak letak dekat header.
- tu je. hehe.
1. bukak photoshop CS4 korang. pergi dekat File - New
2. pastu akan keluar box ni. isi apa yang patut.
name : untitled (biar je nama tu)
preset : custom
width : 953 (ikut saiz header korang)
height : 394 (ikut saiz header korang)
resolution : 100
background contents : transperant (kalau nak buat header transperant, kalau taknak, tick dekat white atau background color)
3. pergi dekat File - Open. pilih gambar yang korang nak untuk letak dekat header
4. lepas korang pilih gambar yang korang nak letak tu, korang pergi dekat Layer - right click dekat petak background tu - duplicate layer
*ni contoh gambar yang aku nak letak dekat header. untuk jadikan transparent, aku nak hilangkan warna purple tu.
5. lepas tu akan keluar satu kotak. just klik ok.
6. lepas tu korang tick dekat kotak background supaya hilang mata tu. hehe.
7. lepas tu korang pergi kat tepi belah kiri tu, cari button eraser. so korang padam la background dalam gambar tu untuk buat header transparent. nak ubah saiz pemadam, right clik je okay.
8. dah siap, korang drag gambar tu dekat header yang mula2 korang buat dekat step satu tadi. ulangi step 3-8 untuk letak gambar lain dalam header transparent korang tu.
*kalau korang nak ubah saiz ke, nak kecik ke nak besarkan ke, nak alih kedudukan ke, make sure korang tick dulu tools yang aku tunjuk dalam anak panah tu
9. lepas tu korang buat lah tulisan apa sekali pun. em pensil dekat anak panah yang aku buat tu.kalau nak buat tulisan cantik cantik, download dulu font dekat SINI.
10. save. untuk dapat gambar yang tak blur, save macam ni. save for webs and devices
ok dah siap. untuk letak header dalam blog pulak, kalau tak tahu, boleh tengok kat SINI. ok. ni aku share cara paling simple nak buat header. sebab nak buat canggih canggih, belum habis sekolah lagi. hehe. hope membantu ok.
HEADER HOVER
BEFORE
AFTER
TEMPLATE DESIGNER BLOG
Dashboard > Design > Edit HTML.
Tekan CTRL+F/F3, search for this code :h1.title {
ATAU
#header h1 {
Copy code ni dan pastekan kat ATAS code tu :#header:hover{
-webkit-transition-duration: 1s;-moz-transform: rotate(4deg);-webkit-transform: rotate(4deg);}
Preview dulu, kalau takda error, save je lah :)NOTES :
ABC : Kalau nak lajukan, tukar ke 0.5 kalau nak lambatkan tukar ke 2.0, 3.0 dan so on.
ABC : Yang Lina bagi tu hovernya ke bawah, kalau nak buat hover ke atas, just tukar ke '-'. Number pun boleh diubah dengan suka hati :)
#UPDATED!
Memandangkan ramai tak jumpa code, cubalah cari code ni : #header { atau /* Header . Then, korang paste code yang Lina bagi tu di bawah code tersebut.
Haa, you see it? Kotak yang dimerahkan tu merupakan code header hover korang. Pastikan korang letak code di tempat yang betul berdasarkan gambar di atas. Erk, kalau tak jumpa code atau tak jadi, pasrah je lah, hihi. Try an error dear :)
#ANOTHER WAYS!
FOR SIMPLE TEMPLATE/TEMPLATE DESIGNER, try search code : /* Content dan pastekan code header hover yang Lina bagi kat ATAS code tersebut ye.
BLOGSKIN
1) Mula-mula, korang TERJAH SINI DULU.
2) Faham kan? Then, ambik je code number 3 kat atas tu. Cuma, tanda # awal code tu sila ubah kepada titik (.) .
CENTER HEADER
CARA PERTAMA
1. Dashboard > Design > Edit Html
2. Tekan Crtl + F , dan cari kod kat bawah ni :
#outer-wrapper {
3. Pastu , bawah kod yang korang carikan tadi tuh , ada kod ni kan ??
background:#FFFFFF;width: 1000px;
*Itu pun , sebagai contoh jer~
4. Makna nyer , outer wrapper tuh . 1000px taw ?? Korang nyer ,tak tahu lah .
5. Tapi , tak siap lagi ni . Then , korang cari pulak kod ini..
#header-wrapper {
6. Dah jumpa kan ?? Pastikan width dekat header dengan outer wrapper tu sama .So korang punya header akan jadi center la .
7 . Preview dulu . Dah jadi , baru SAVE ok ? :)
CARA KEDUA
1. Dashboard > Design > Edit Html
2. Tekan Ctrl + F , cari :
/* Content
3. Lepas tu , copy kod kat bawah ni , then paste ATAS kod yang korang carikan tadi tu .
.Header img {margin-$startSide: auto;margin-$endSide: auto;}
4. Paham ke tak ? if korang tak paham , tengok contoh ni :
.Header img {margin-$startSide: auto;
margin-$endSide: auto;
}
/* Content
----------------------------------------------- */
5 . Preview dulu . Kalau jadi , SAVE yerk ^_^
P/S: malas nak update tuto sendiri so Miss just copy paste jer untuk yang ini, tapi
semua ni memba blogger Miss.. Ok,, selamat mencuba DARLING ^^
Labels: HEADER
No harsh words!
Allah S.W.T
Lelaki Poyo
Post a Comment
Awak sayang Buddies an, commentlah :D