Wadah Madrasah Pengalaman: Tutorial tajuk pada side Bar berlatar belakang/Background/Bergambar/icon/ dan kawaii


Monday, March 14, 2011

Tutorial tajuk pada side Bar berlatar belakang/Background/Bergambar/icon/ dan kawaii

.




Salam Korang..

Kali nie Wan nak wat tutorial untuk side bar blog korang lak..Tutorial tajuk pada side Bar berlatar belakang/Background/Bergambar/icon/ dan kawaii..Tajuk pun Wan tak taw nak letak apa..Hentam je lah..ehehhe..Apa yang Wan maksudkan ialah macam kat gambar atas or bawah nie..ehehe.



Yang kat atas nie sebelum di ubah suai.Dan kat bawah nie dah di ubah suai..



So ada tak sesape yang berminat??Tutorial nie hanya untuk design/layout template je k..Classic template tak leh k.Template yang Wan gunakan pada WanhazelJunior ialah Minima Template...Wan tak pasti law template yang korang gunakan boleh atau tak..Backup template korang dulu k.

Jum Tutorial..

Mula mula korang wat dulu background untuk bahagian side korang tu..Guna adobe or apa apa medium editing..Law susah sangat nak edit..Korang ambek je gambar kat bawah nie..ekot size dia k..Wat macam kat bawah nie..kosong je..tak yah tulis apa apa..Untuk wat box macam kat bawah nie..Korang leh tengok tutorial nie "Tutorial Art Word (Kawaii cute Fonts)"..Korang tengok tutorial untuk design 2 k..tengok camne nak wat kotak tu je .Save dalam format .PNG.



Law dah selesai tu..Korang ambek kod HTML untuk Box yang korang wat tu...Tengok link nie untuk dapatkan link gambar.."Tutorial nak dapatkan kod gambar/photo"

Dah selsai dapatkan link gambar tu..Korang Edit HTML blog korang lak


Dashboard>Design/layout>Edit HTML
Tick expand widget


Lepas tu korang cari kod ..CTRL+F untuk memudahkan pencarian.


/* Header


Law korang dah jumpa..Korang copy kod bawah nie dan paste diatas kod yang korang cari tadi.

_________


/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: #000000;
line-height:10px;
padding:8px;
margin-bottom:10px;
}
.sidebar h2 {
background:transparent;
background-image:url(LETAKKAN KOD BOX KORANG
);background-repeat:no-repeat; background-position:center center;
color:#ffffff;
padding:18px 0px 0px 46px;
font-weight:bold;
font-size:20px;
line-height:59px;
text-transform:none;
letter-spacing:1px;
text-align:left;
border:0px solid #070200;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
background:url("") no-repeat 2px .08em;
margin:0;
padding:0 0 5px 10px;
margin-bottom:2px;
text-indent:3px;
line-height:10px;
}
.sidebar .widget, .main .widget {
border-bottom:0px dotted #faac04;
margin:0 0 0.5em;
padding:0 0 0.5em;
}
.main .Blog {
border-bottom-width: 0;
}
//Http://wanhazel.blogspot.com/



______________


LETAKKAN KOD BOX KORANG
Korang gantikan masuk kod HTML Box korang kat sini

18px 0px 0px 46px;
Korang ubah kod yang berwarna hijau tu je k..Ubah nombor nya..Try and error untuk kedudukan tulisan korang dalam Box tu..Lain lain korang leh godek sendiri.


Selepas tu klik preview..Law tak de error or sesuatu yang buruk terjadi..Korang save je...


So selamat mencuba.


.



25 comments:

adlin roshaida said...

thanks wan ;)

dill said...

wan ni kreatif la. kagum!

Miss Dill^^

Unknown said...

nti nk buat,,,
bile da xbuzy,,,
:)
tq, wan,,,

Wan_hazel said...

adlin roshaida

welkam..hehehe

Wan_hazel said...

Miss Dill

tengs..wan biase2 je

Wan_hazel said...

miz ruha

welkam..ok nanti leh lah wat kan

cik mieza said...

thx wan hazel..menjadi la..suke2.. :)

Cik Wa said...

Sayang Wan Lebih...
mmg dh lame wawa cari tutorial nie.. http://wawajib.blogspot.com/

Wan_hazel said...

cik mieza

welkam..ehehhe

Wan_hazel said...

Cik Wa

ehehhe...welkam..peace

Hanis Zakirah said...

hmm..x de error tp x jadi..merata cari tapi satu pun x jadik :(

Wan_hazel said...

Hanis Zakirah

kenapa lak tak jadi??dah ekot tuto wan???

Hanis Zakirah said...

dah ekot..still x jadi

Wan_hazel said...

Hanis Zakirah

law tak leh tu..wan pun tak taww nape...maaf taw

Hanis Zakirah said...

hmm ok lah

Unknown said...

nper x jumpe kod header tuh?

Unknown said...

nper x jumpe kod header tuh?

Wan_hazel said...

tak jumpa...guna template len kot

Aizat Chik Suliman said...

kalau nak ubah background kotak widget same macam mane?? tolong ajar ye :)

http://aizatchiksuliman.blogspot.com/

Wan_hazel said...

yg tu kene edit HTML jugak tu....wan blum wat lagi

kak tie said...

Wan..akak dah buat..jadi pun,tapi nape kotak tu penuh ye...kat sebelah tepi kiri kanan tu x de...
tolong Wan ye...thanks..

Wan_hazel said...

Cik Tie@Akak

size side akak ada amsalh kot..kene ubah sikit

kinAzizan said...

Assalamualaikum..wan,nak letk kat follower macam mana?

Wan_hazel said...

letak je sama je caranya..

Student Kecik said...

thanks Wan, dah jadi ^^
Anis guna Simple Template tp anis ada ubah koding sikit kalau tak,tak jadi