Wadah Madrasah Pengalaman: Tutorial Header berubah bila cursor menyentuh : Biyha


Wednesday, August 17, 2011

Tutorial Header berubah bila cursor menyentuh : Biyha



.



Tutorial nie 100% dari Biyha
Dan diubah mengikut kesuaian



Saya tengok ramai juga request tuto header hover dekat BBB so saya cadang nak buat tuto ni. Header saya berjaya \bangga sekejap, haha/. Okay, lets start.
This tuto boleh diguna untuk template layout, denim, minima and simple.
1. Seperti biasa pergi Dashboard > Design > Edit Html \Pastikan awak download full template dulu/
2. Ctrl + F and search for this code:

/* Header
3. Copy dan paste code ini di bawah anak-anak code /*Header.

#header:hover {
background: url(URL Image)
}
Contoh coding saya \kalau tak tahu nak letak mana/
klik untuk pembesaran




P/s: Url Image perlu diupload di photobucket, kalau guna kaedah upload di post entry gambar dia akan jadi kecil dan make sure betul-betul ikut size header.

Additional Tutorial:
Unclickable header maksudnya header kita tak boleh diklik so dia tak akan pergi balik ke blog kita. Contoh macam saya punya, awak click dia tak ada pape kesan kan.

1. Dashboard > Design > Click Gadget Header > Tick pada behind title and description. \rujuk gambar bawah/.






2. Done? Lepas tu pergi Design > Edit Html > Tick expand widget templates. 3. (Tekan Ctrl + F) untuk menyenangkan mata anda untuk search code ini:

<Variable name="headerTextColor"


4. Korang akan nampak anak-anak code dia seperti ini:


<Variable name="headerTextColor" description="Page Header Text Color" type="color" default="#ffffff" value="#ffffff">



5. Yang dihighlight hijau tu tukar kepada transparent. Preview dulu baru save. P/s: Tuto ni hanya untuk denim. Tapi kalau template korang ada code-code dia okaylah tu. Kalau korang tak ada code ini cuba cari lebih kurang macam bertajuk 'Blog Title Color'. Yang ada kene mengena dengan title blog lah. Contoh saya punya code.

<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="transparent" value="transparent"


.




6 comments:

사유리 하나 (SaYuRi) said...

erkk tuto ni xsama ea dengan yang ri tuh punya? yang tuto http://wanhazel.blogspot.com/2011/08/tutorial-header-berubah-bila-cursor.html

Wan_hazel said...

yuri..tak sama

AliaJustea said...

wan..tuto yg imge assalamualaikum kt entry tu tak de ke ?

Wan_hazel said...

yg tu tak de lak wan..nanti wan cari kod dia k.

AiDa SyaFiQa said...

thanks yer wan!..berjaya..yeaaayy!! :)

Wan_hazel said...

gud2..ehehe