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:
thanks wan ;)
wan ni kreatif la. kagum!
Miss Dill^^
nti nk buat,,,
bile da xbuzy,,,
:)
tq, wan,,,
adlin roshaida
welkam..hehehe
Miss Dill
tengs..wan biase2 je
miz ruha
welkam..ok nanti leh lah wat kan
thx wan hazel..menjadi la..suke2.. :)
Sayang Wan Lebih...
mmg dh lame wawa cari tutorial nie.. http://wawajib.blogspot.com/
cik mieza
welkam..ehehhe
Cik Wa
ehehhe...welkam..peace
hmm..x de error tp x jadi..merata cari tapi satu pun x jadik :(
Hanis Zakirah
kenapa lak tak jadi??dah ekot tuto wan???
dah ekot..still x jadi
Hanis Zakirah
law tak leh tu..wan pun tak taww nape...maaf taw
hmm ok lah
nper x jumpe kod header tuh?
nper x jumpe kod header tuh?
tak jumpa...guna template len kot
kalau nak ubah background kotak widget same macam mane?? tolong ajar ye :)
http://aizatchiksuliman.blogspot.com/
yg tu kene edit HTML jugak tu....wan blum wat lagi
Wan..akak dah buat..jadi pun,tapi nape kotak tu penuh ye...kat sebelah tepi kiri kanan tu x de...
tolong Wan ye...thanks..
Cik Tie@Akak
size side akak ada amsalh kot..kene ubah sikit
Assalamualaikum..wan,nak letk kat follower macam mana?
letak je sama je caranya..
thanks Wan, dah jadi ^^
Anis guna Simple Template tp anis ada ubah koding sikit kalau tak,tak jadi
Post a Comment