[Tutorial] Header Hover Like Me

This tuto request from shi_a. Korang try letak cursor kat header yana. Hilangkan? Heee. Magic tak? Magic tak? XD So, meh sini yana nak ajar macam mana nak buat ^_^
1. Dashboard > Template > Edit HTML
2. Ctrl + F, search for this code : 

#header {

Kat bawah dia ada anak2 dia kan? Tapi lastly dia ada penutup dia simbol } kan?
3. Jumpa? Copy this code and paste BAWAH atau BELOW \bahasa omputihnya/ code } tadi.

#header:hover {padding-left:160px;-webkit-transition: .4s;opacity:.01;}

#yang merah tu korang boleh ubah ikut suka korang macam mana. Save! Hikhok. Tu je. Kboiii :D
##untuk pengguna blogskin :
1. Kalau korang punya header menggunakan code nie :

<center><img src="URL HEADER" /></center>

Korang tukar code tu dengan code nie :

<center><img class="header" src="URL HEADER" /></center>

2. Then, korang Ctrl + F, search for this code :

<style type="text/css">

3. Pastekan code nie, kat BAWAH code <style type="text/css"> tu :

.header {text-align: center;-webkit-transition: 1s;opacity:100;}.header:hover {padding-left:160px;-webkit-transition: .4s;opacity:.01;}

#yang purple tu letak image header korang.#yang merah boleh uabh ikut suka korang. Then save template. Siap!^^
Lots of LoveYana♥

[Tutorial] Bling Bling Header

Tadi try buat header bling bling. Then post kat BBB. Lepas tu pun dorang mintak buatkan tuto. Disebabkan yana nie baik \cehh/ yana pun buatlah. Hehe. Tapi tuto nie panjang sikit tau. Sebab nak kena buat beberapa kali baru jadi :3
Lets begin! :D
1. Of course lah korang kena bukak photoshop dulu. Yana guna photoshop cs5. Kalau sesapa yang takde tu, boleh download kat sini :)
2. Dah bukak, tekan Ctrl + N || File > New. Nanti dia keluar macam kotak kat bawah nie :

#picit gambar untuk tubesaran dugro :3

#yang Width dgn Height tu korang boleh tukar berdasarkan body blog korang. Pastikan background tu Transparent ye? :)
3. Dah keluar layer tu, korang tulis lah macam biasa.

#yang simbol 'T' tu adalah untuk Text.

4. Lepas tu, korang bukak satu lagi tab, untuk image dia. Ctrl + O untuk dapatkan gambar. :)

Then Ctrl + A > dia akan select semua gambar tu, Ctrl + C copy gambar tu.
5. Balik semula kepada Text korang tadi, Ctrl + V, pastekan gambar tadi. Tapi sekarang dah timbul saru masalah yang mana tulisan korang tu dah hilang. Kan? So, buat macam nie :

#yang layer tulisan tu ade kat bawah kan? Korang move naik ke atas. Then dia akan jadi macam nie :

#Tulisan tu dah nampak balik kan? :)
6. Korang tekan kat layer text tu. Then dekat bahagian tools, korang select kat Magic Wand Tool || W.

#then korang select kat tulisan korang tu. \paham tak setakat nie?/
7. Dah habis select, korang select pulak kat layer background tu.

#Ctrl + Shift + X > dia select bahagian background yang luar pada tulisan tu.#Ctrl + X > dia hilangkan background yang kat luar tu.#then korang unselect layer text \yang ada mata tu, tekan kat situ/ <-- paham tak? macam berbelit je ayat --'
8. Then, korang nampak tak kat atas tu yana ada tunjuk arrow ke fx? Kalau korang nak gambar tu jadi lagi menarik, tekan kat situ :)

Tengok kat tempat yang yana tick tu.#Bevel and Emboss > nak buatkan gambar tu jadi 3D atau tak.#Stroke > nak dapatkan line kat luar gambar tu.
Then, Save as PNG :3

Hasilnya :

Heyyy. Na pegi mana tu? Tak habis lagi kira belajar nie ye murid2. Disebabkan kita nak buat gambar tu jadi bling bling, proses nie tak habis lagi ye? Hoho. Tengok lagi kat bawah2 nie haaa. XD
9. Korang back balik sampai ke step 5. Ctrl + Shift + Z untuk back. :)

Korang ulang step tadi tu untuk mendapatkan beberapa layer. Macam yana, yana buat 4 layer semuanya. Okay. Dah siap semua?

Bling Bling Header :3

1. Korang tekan Ctrl + O, bukak hasil yang korang buat 1st sekali tu. Macam kat bawah nie.

2. Dah bukak? Korang pegi ke document file korang, kat tempat yang korang save gambar2 tadi tu. Dah? Select gambar tu. Lepas tu drag ke photoshop. Macam nie :

#Click gambar tu, dan tarik masuk ke photoshop. Nanti dia akan jadi macam nie pulak :

Korang tekan Enter je sampai layer yang last sekali :)

3. Then korang tekan kat button atas tu, yang perkataan Windows. Then dia kelua list, pilih Animation.

Dia akan keluar satu kotak panjang kat bawah image tu.

4. Korang unselect semua layer tu, kecuali layer yang bawah sekali.

#Then korang tambah layer \macam gambar atas tu/ dan select SATU layer. Then tambah lagi dan select satu layer yang lain. *mulakan daripada bawah ye?

#Dah siap semua tu? Try tekan button play yang ada kat bawah kotak panjang tu. Tengok laju mana. Korang boleh adjust masa dia untuk berlari berapa lama :3

5. Then, Ctrl + Alt + Shift + S, Save gambar tadi.

#Kalau nak guna gambar tu sebagai header, macam biasalah. Upload ke photobucket dulu. Then amek url dia. Siap!^^
Nie hasil kraftangan yana. Luls! :D

#picit gambar untuk melihat mereka berjoget XD

Dekat dua jam jugak nak buat tuto nie pun. Haha! Adeh! Penat ouh. So, please. Jangan copy tuto yana tanpa kebenaran ye? :) Sakit leher yana tau buat nie T-T \muka mintak simpati/ XD

Btw, good luck you all! >_<

Lots of Love,Yana♥

[Freebies] Header II

Seperti yang yana janjikan semalam, yana nak post freebies header nie sama ada petang semalam atau pagi nie. Memandangkan semalam tak sempat nak post, so yana post pagi nie. Hee. As usual, dah amek nie bagitau lah. Korang boleh edit macam yang korang nak. Kalau nak la. Kalau tak nak pun takpe. Tapi kalau edit tu, JANGAN buang watermark yana > SP_93 = SweetiePie_93 :)

Picit gambar untuk dapatkan url. Sorry kalau tak lawa. Hooo. Oh, please! JANGAN amek dan buat sebagai freebies korang pulak ye? Thanks :)
 Lots Of Love,Yana ♥

[Freebies] Header I

Heyy awak! Hari nie yana bermurah hati nak bagi awak semua hadiah. Semua nie atas jasa baik korang yang sudi singgah dan baca entri2 yana yang yana rasa takde lah best mana. Korang boleh amek header kat bawah nie dan kalau nak edit dipersilakan. Tapi JANGAN buang watermark yana tu ea?^^. And pleaseee. JANGAN amek freebies yana dan buat macam freebies korang sendiri. Ok? Btw, dah amek tu comment2 lah ye? Nak jugak yana tengok hasil kerja korang nanti. Hee :)

width : 760px

height: 310px

#Picit gambar untuk ambik url dia :)

Header nie bukan yang jenis bersambung dengan body tau. Tapi kalau korang pandai edit balik, boleh je jadi header bersambung. Dan sebenarnya header nie boleh je guna untuk mana2 jenis blog pun. Just ubah width dia dah okay. Btw, SP_93 is my watermark which mean Sweetie Pie_93. Please don't remove! Thanks :)

[Tutorial] Create Header Using Photoshop

Ada beberapa orang tanya yana macam mana nak buat header. Ada yang tanya nak buat heaqder guna photoshop macam mana. Jadi, sementara yana tengah ada masa lapang sikit, yana buat lah entry nie khas untuk korang yang bertanya tu. By the way, sorry for late tutorial. I've been busy lately :(

Firstly of course lah korang kena ada software photoshop. Kalau takde boleh download kat >SINI< dan install. Dah ada tu baru lah boleh buat header!^^

1. Bukak photoshop korang tu. Then tekan Ctrl + N \New/ dan pilih saiz header yang korang nak.

# Yang Width tu korang pilih ikut saiz body blog korang ea? Then yang background tu boleh pilih nak yang ade warna atau transparent.

2. Then korang buat lah header yang korang nak mengikut kretiviti korang. Kalau korang nak letak tulisan boleh tekan kat tempat yang yana kotakkan tu. Yang simbol 'T' tu.

3. Kalau nak letak gambar, korang Ctrl + O\Open/ gambar yang korang nak. Then copy dan pastekan kat bakal header comel korang tu :)

# Yang header kat atas nie yana buat dua jenis. Sama tapi tak serupa. Korang boleh buat  macam nie untuk dapatkan header macam yana yang kat atas tu. Ada tulisan tersembunyi yang keluar bila cursor diletakkan kat situ :)

4. Dah siap edit2 apa semua tu, korang Ctrl + S\Save/ header comel korang tu as PNG. \Nanti dia senang nak loading kalau dalam format PNG/

5. Lepas tu korang letak lah kat blog korang. Siap!^^

p/s : Kalau nak buat header macam yana tu boleh tengok tuto kat >sini< :)

[Tutorial] Header Hover

Korang dah nampak title kat atas tu. Dah nampak orang tanya nie, so tunggu apa lagi. Lets begin!^^

Firstly, korang kena la edit dua header yang sama tapi berbeza. Boleh paham tak? Alaa. Macam header yana la. Sama tapi berbeza. Bila cursor letak kat header tu, dia ada keluar perkataan tersembunyi tu kan? Sebenarnya yana guna dua header kalau korang nak tau ^^ . Korang edit la header tu kat photoscape atau photoshop. Then upload kat photobucket or tinypic or mana2 yang korang selalu upload gambar then amek url dia tu.

Then pegi bukak Dashbord korang pulak dan ikkut steps kat bawah nie :)
1. Templates/Design > Edit HTML > tick Expand Widget

2. F3 and search for this code

#header {

Dah jumpa kan? Bila dah jumpa, kat bawah tu ada anak2 cucu cicit dia kan? Haa. korang tengok code dia, ada simbol } kan?

3. Copy code nie kat bawah code } tu

#header:hover {
background: url(URL HEADER IMAGE)
}

#yang code warna merah tu korang masukkan url header kedua korang bila korang dah upload tadi.

4. Save!^^

[Tutorial] Rapatkan Header Pada Body Blog

Salam readers~

Pagi2 nie yana bangun, bukak blog. Cadang2 nak update lah konon. Tapi tak tau topik hape nak cakap. Ehee. Jadi yana berterima kasih kepada sorang unnie nie yang tanya pasal tutorial hari nie. So,tanpa membuang masa jom kita mulakan! :D

1. Dashboard > Design > Edit Html


2. Ctrl + F untuk cari code nieh :

/* Header

3. Dah jumpa tu korang scroll down pelan2 da nakan jumpa code nieh pulak :

border: 9px solid $headerBgColor;

4. Gantikan 9px kat atas tu dengan 0px. So akan jadi mcam nieh :

border: 0px solid $headerBgColor;

5. Tak paham? Tengok kat bawah nie :

*Get it?*

6. Preview. Kalau takde apa2 error just tekan Save. Siap! :)






UPDATE


Kalau korang takde code macam kat atas nie, korang guna cara nie pulak.


1. Dashboard > Design > Edit HTML


2. Ctrl + F search for this code :
#content-wrapper {


3.  Dah jumpa? Tengok kat bawah2 tu sampai jumpa code nieh.
border:1px solid #000000
-moz-border-radius:10px;


dah jumpa tu gantikan code tu dengan code yang kat bawah nieh :
border-left:1px solid #000000;
border-right:1px solid #000000;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
}


Tak paham? Picit gambar kat bawah nie untuk tumbesaran dugro :)

Sebelum :

Selepas :

Ehhh? Nak pegi mane tu? Nanti dulu. Tak habis lagi la. Korang kena modify korang punya header pulak. Tapi yana tunjuk guna photoshop cs5 ye? Sebab yana buat header guna tu je. Kalau yang photoscape yana tak reti. -.-'


1. Bukak photoshop tu > Ctrl +N untuk dapatkan New Layer

*Picit untuk tumbesaran dugro*

Yang kat width dan height tu korang boleh ubah ikut saiz body korang ye.


2. Tekan kat keyboard korang huruf U. Nanti secara autonya dia akan ke tool yang kita perlukan tu.

Yang kat num 2 tu korang boleh pilih nak bentuk dia jadi macam mana nanti. Yang ketiga tu kalau korang nak bagi lengkuk gambar tu besar korang boleh adjust sendiri. Then yang kat num 4 tu boleh tukar color ikut color body blog korang. Then baru buat macam benda putih kat atas tu. Selesai?


3. Korang select pulak move tool yang kat atas sekali tu untuk move benda putih tu. Korang tarik la samapi bawah mana yang korang nak. Kalau gamba tu tak sama besar dengan width korang yang awal tadi, korang boleh adjust sendiri. Ctrl + T untuk adjust.

4. Then buatlah header korang tu. Rujuk gambar kat bawah nie :

5. Then macam biasa korang letak header yang korang baru buat nie kat blog korang tu. Siap! :)

Sekian :]